CODEWITHSUNDEEP
reactjsaxios
user15404864
user15404864

Reputation:

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

I am having trouble on posting the lists of data in my table, I hope you guys can help me with this issue, this is the error i am getting Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

  const columns = [
    {
     name: "name",
     label: "Name",
     options: {
      filter: true,
      sort: true,
     }
    },
    {
     name: "dateregistered",
     label: "Date Registered",
     options: {
      filter: true,
      sort: false,
     }
    },
    {
     name: "department",
     label: "Department",
     options: {
      filter: true,
      sort: false,
     }
    },

   ];
   
   const data = [

      posts.map(post => [{name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}])
    
       ];

  return (
    <>
        <MUIDataTable
          title={"Deactivated Users"}
          data={data}
          columns={columns}
          options={options}
        />
    </>
  )

Upvotes: 3

Views: 29193

Answers (2)

Tumo Masire
Tumo Masire

Reputation: 432

The issue is that data is being created as an array in an array in an array. This is why when you try const data = posts.map(post => ...) the error persists, as there is still an array in an array. After you try the above, also re-write

post => [{name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}]

to

post => ({name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'})

(Changing the square brackets to round)

P.S When you map over posts to build the data, you build a object with the the key "name" and the value "'post.firstname'". That value is a string literal and not accessing some other JS object (It will make "post.firstname" the value for all the post's. Same goes for the other keys.

Upvotes: 2

DrunkOldDog
DrunkOldDog

Reputation: 748

I see two problems in your data constant. The first one, the .map method returns an array, so there is no need to wrap that value inside an array keys []. The other problem is that you are wrapping the .map return state object in array keys too, that is why the error of creating an object is displayed, because you are returning arrays inside the main mapped array [[{ name: ... }], [{ name: ... }]].

So basically the solution for your issue would be:

const data = posts.map(post => ({name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}))

Where the parenthesis allows the map method to directly return the object.

Upvotes: 5

Related Questions