Redux.js: Trouble rendering array of objects

Question

I had an action make an api call to a backend to retrive an array of objects. The action then dispatches an update to a state variable. At this point I meet the following error:

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

The following code has been minimized to still produce the error:

getDonationData : (reportType, recordCount) => (dispatch => {
    return Axios.post(`http://localhost:4000/reports/`,
      {
      reportType, recordCount
    }
    )
      .then(apiResponse => {
        const returnedArray = apiResponse.data;
        dispatch({
          type : 'reportData',
          payload : [{x: 1, y: 2}, {x: 4, y: 3}]
        })
      })
  })

If the objects in the array are replaced by numbers like [1, 2, 3] the error goes away.

Does anyone know why this is happening and how to work around the possible nesting limitation? My actual data has about 500 items and the x values are also date objects (this is chart data).

Reducer code:

case 'reportData':
      return {
        ...previousState,
        reportData : action.payload
      };

Error Yatish · Accepted Answer · 2019-02-06 18:06:14Z

1

This error is might from component where you are accessing reportData, may be you are trying to display object (ex. {x:1, y:2}) from reportData instead of single data (ex. x).

answered Feb 6, 2019 at 18:06

Error Yatish

1061 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean D Over a year ago

You are correct, it was in the prop passdown that the error was being raised: reportData={this.props.reportData}

Collectives™ on Stack Overflow

Redux.js: Trouble rendering array of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related