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 :-)

Please show us what the contents of `ProjectenList` are. From the fact you're using `project.id` (and the error), we can guess that they're objects, but...? — T.J. Crowder, Sep 16 '20 at 09:04

T.J. Crowder · Answer 1 · 2020-09-16T09:17:15.150

2

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)...

edited Sep 16 '20 at 09:17

answered Sep 16 '20 at 09:04

T.J. Crowder

1,031,962
187
1,923
1,875

ProjectenList is a variable containing the array with objects (with their own properties). So indeed, it works when I use {project.id} for instance, but not when I only use {project}. This is the part I don't understand. – Paul Sep 16 '20 at 09:11
@Paul - You have to tell React what it is about the object you want to display in that `div`, what properties, etc. It's not all that different from if you were using the object in a string. If you did `const str = "The object is: " + project;`, you wouldn't get anything useful in the normal case (you'd get `The object is: [object Object]`). So as I've noted above, you have to use information from the object to show how it should be displayed in the DOM. – T.J. Crowder Sep 16 '20 at 09:14

Shubham Verma · Answer 2 · 2020-09-17T14:08:05.440

0

You need to return array from your ProjectItem i.e 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>
    )
  }

edited Sep 17 '20 at 14:08

answered Sep 16 '20 at 09:04

Shubham Verma

4,918
1
9
22

The OP **is** returning the result of `map` (and changing it to the above would cause a syntax error). They're using `()`, not `{}`, in the arrow function, so the arrow function returns that expression's result. (It's a bit hard to read.) (Side note: If this *were* the problem, it would make the question a duplicate of [this one](https://stackoverflow.com/questions/45754957/why-doesnt-my-arrow-function-return-a-value).) – T.J. Crowder Sep 16 '20 at 09:05
Thanks! But I'm immediatly returning anything that's inside the arrow function with ( ) instad of { }. – Paul Sep 16 '20 at 09:09

Serhat Kaya · Answer 3 · 2020-09-16T09:23:35.973

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.

Shahbaz · Answer 4 · 2020-09-16T10:07:50.053

-1

you can use project as object into div element

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

edited Sep 16 '20 at 10:07

answered Sep 16 '20 at 09:40

Shahbaz

178
7

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

in this way: ```

{ ProjectItem }

4 Answers4