Objects are not valid as a React child error in Datatable

Question

OK, so Im getting this error when trying to return some data from my web api. Ive tried all as suggested on other similar posts but cant get this working. Any help appreciated.

Objects are not valid as a React child (found: object with keys {addressType, address1, address2, city, county, postCode, country, id}). If you meant to render a collection of children, use an array instead.

data...

"rows": [
        {
            "company": null,
            "controlPanel": null,
            "name": "Basement",
            "cloudAccessEnabled": true,
            "notes": "quad volcans quad quo si imaginator volcans brevens, nomen gravum Multum plorum brevens, in e quo quad",
            "addresses": [
                {
                    "addressType": "HeadOffice, Marketing",
                    "address1": "729 Rocky First Blvd.",
                    "address2": "APT 22",
                    "city": "Haverhill",
                    "county": "Dunbartonshire",
                    "postCode": "SL1 9GH",
                    "country": null,
                    "id": "62a494ee-37cf-3021-5a29-00b54adc9255"
                }
            ],
            "installers": null,
            "lastMaintenance": "2016-06-30T00:00:00",
            "nextMaintenance": "0001-01-01T00:00:00",
            "latestResult": "None Yet",
            "id": "c0d44330-8369-0e78-f45b-000142b59fa8"
        },

how I am trying to display in datatable... https://github.com/jbetancur/react-data-table-component

//this works
//cell: row => <div>{row.notes}</div>,

//doesnt work-Objects are not valid as a React child error
    cell: row => (
        <div>
          {row.addresses.map((addressType, id) => (
            <div key={id}>{addressType}</div>
          ))}
        </div>
      ),

the adressType you are passing in your map function is not what you think you are passing, that adressType is actually your addresses[i] for that iteration so what you should do is: <div key={adressType.id}>{adressType.adressType}</div>. Change the adressType in map function to a better name like address then do address.id and adress.adressType and remove the id from your map function. — ImInYourCode
– ImInYourCode, Commented Aug 30, 2019 at 15:43
Or you could do what @JojoTutor said below and deconstruct it. — ImInYourCode
– ImInYourCode, Commented Aug 30, 2019 at 15:45

Jojo Tutor · Accepted Answer · 2019-08-30 15:42:44Z

1

It should be like this:

cell: row => (
        <div>
          {row.addresses.map(({ addressType, id }) => (
            <div key={id}>{addressType}</div>
          ))}
        </div>
      ),

answered Aug 30, 2019 at 15:42

Jojo Tutor

9106 silver badges7 bronze badges

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

3 Comments

Steven Collins Over a year ago

Thanks thats fixed the Objects are not valid as a React child error, but now im getting Uncaught TypeError: Cannot read property 'map' of null

Jojo Tutor Over a year ago

That case maybe some "row" does not have "addresses" property, try this: {row.addresses && row.addresses.map(({ addressType, id }) => ( <div key={id}>{addressType}</div> ))}

Jojo Tutor Over a year ago

Glad to help ...!

Collectives™ on Stack Overflow

Objects are not valid as a React child error in Datatable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related