-1

Set data:

export const setIngredients = (ingredients) => {return { type: actionTypes.SET_INGREDIENTS,ingredients : ingredients}}

Get data:

export const initIngredients = () => {return dispatch => {axios.get('....').then(response => {dispatch(setIngredients(response.data));}).catch( error => {dispatch(fetchIngredientsFailed())})} }

Error:

Objects are not valid as a React child (found: object with keys {objectId, name, createdAt, updatedAt, value}). If you meant to render a collection of children, use an array instead.

return dispatch => { axios.get('......').then(response => {dispatch(setIngredients(response.data));}).catch( error => {dispatch(fetchIngredientsFailed())}

reza eibakabadi
  • 1
  • 4
  • Try to check if your response.data has data. Try using the if-else condition on that matter. It may return an undefined value. – luffypirates Jun 04 '23 at 12:19
  • Please add the rest of your component code as a [mcve]. [Here's some documentation on how to create a React snippet](https://meta.stackoverflow.com/a/338538/1377002). – Andy Jun 04 '23 at 12:30

1 Answers1

0

It doesn't seem to be the issue with your API fetching Axios code, Instead its the issue in rendering logic.

Somewhere in your JSX code, You are directly referencing an object/array of ingredients that's why it is giving this error. As react don't support object or array as a child component.

You can also refer this question, Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Mayank_MP5
  • 153
  • 1
  • 8