Working with a array of objects in React. Iterating error saying I cannot use object, use array instead

Question

I'm working on a React portfolio project. I have an external data.js file with an array of objects, which I import into the JS file I'm working in. I want to iterate over the array and place each object into it's own div.

I already tried an If Loop and now working with Map(). This is my code:

const Project = () => {

    const ProjectItem = () => (
      ProjectenList.map(project => (
        <div key={project.id}>
          <div>{project}</div>
        </div>
      ))
    )


    return (
      <div className='project-kader'>
        <h1 className='title'><ProjectItem /></h1>
      </div>
    )
  }

I don't get the problem of iterating trough an array of objects. This is the error:

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

I must overlook a simple thing, but I'm a little stuck at the moment :-)

Answer 1

From the fact you're using project.id (and the error message from React), we can assume that project is an object, which means you're trying to use an object as a React child here:

<div>{project}</div>

The error is that you can't do that. Instead, use properties from the object to come up with how you want it displayed. For instance, if project has a description property:

<div>{project.description}</div>

Or if it has (say) a description and a number of days estimated for the project, you might do:

<div>{project.description} - {project.days} {project.days === 1 ? "day" : "days"}</div>

And so on. The fundamental thing is to provide React with something it can put in the DOM (loosely, "display"), such as strings, numbers, arrays, true (but not false )...

Answer 2

You need to return array from your ProjectItem ie you need to do this:

const Project = () => {

    const ProjectItem = () => (
      ProjectenList.map(project => (
        <div key={project.id}>
          <div>{project}</div>
        </div>
      ))
    )


    return (
      <div className='project-kader'>
        <h1 className='title'>{ProjectItem()}</h1>
      </div>
    )
  }

Answer 3

try JSON.stringy(project) like this or you should use your object property.Let's we say project has a property that called name

Here is a working example for you.

const Project = () => {

const ProjectItem = () => (
  ProjectenList.map(project => (
    <div key={project.id}>
      <div>{JSON.stringy(project)} || {project.name}</div>
    </div>
  ))
)


return (
  <div className='project-kader'>
    <h1 className='title'><ProjectItem /></h1>
  </div>
)

I hope it can work.

Answer 4

you can use project as object into div element

const ProjectItem = () => (
        ProjectenList.map(project => (
            <div key={project.id}>
                <div>{project.text}</div>
            </div>
        ))
)