Render object in React

Question

I want to render Object "genres" but my console returns to me :

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

My code

function Movie({title,summary,year,poster,genres}){ 
    return(
        <div className="movie">
            {genres.map(genre=>{return {genre}})} //doesn't work
        {genres.map(genre=>{return <li>{genre}</li>})}
         </div>
    )
}

the first code

{genres.map(genre=>{returns {genre}})}

doesn't work

But the second code below works well.

{genres.map(genre=>{returns <li>{genre}</li>})}

What's the difference between these two things?

This article explains it in details akashmittal.com/react-error-objects-not-valid-react-child — Igor Litvinovich
– Igor Litvinovich, Commented Dec 16, 2020 at 12:11
First one is returning an array of objects ({ genre } creates an object using shorthand property name) . The second one is returning an array of <li> — adiga
– adiga, Commented Dec 16, 2020 at 12:11

Christopher Francisco · Accepted Answer · 2020-12-16 15:32:37Z

1

This line

{genres.map(genre=>{returns {genre}})}

returns an object, out of each item in the array: { genre: 'drama' }

However, this other line

{genres.map(genre=>{returns <li>{genre}</li>})}

The { inside the JSX for li won't turn it into an Object, but will access its value: <li>drama</li>

edited Dec 16, 2020 at 15:32

answered Dec 16, 2020 at 12:16

Christopher Francisco

16.4k31 gold badges110 silver badges222 bronze badges

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

Comments

fullstack · Accepted Answer · 2020-12-16 12:11:47Z

0

The first code returns an object with key "genre" which its value is the genere value, and react can't render it.

The second one return the value of genre, because the braces here aren't an object braces but the correct syntax of putting variables inside html in react.

If you want to return the value without li, do: {genres.map(genre=> genre)}

answered Dec 16, 2020 at 12:11

fullstack

8347 silver badges24 bronze badges

2 Comments

Igor Litvinovich Over a year ago

This expression returns array of undefineds though. genres.map(genre=>{return {genre}})

minami Over a year ago

It was really helpful for me.Thanks a lot

Collectives™ on Stack Overflow

Render object in React

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related