Using nested objects in React state

Question

Objects are not valid as a React child (). If you meant to render a collection of children, use an array

I receive the above error and I don't fully understand the limitations of what it's telling me. Here is my code that is giving me this error, I have an object where one of the properties has the value of an array of objects:

state = {
    clubs: [{
        teamName: something,
        gamesPlayed: [{
            homeTeam: someName,
            awayTeam: someNameElse,
            score: numbers
        },
        {
            homeTeam: ...
            ... etc
        }]
    }]
}

The element that renders the code:

function RenderTest(props) {
    return (
        <ul>
            <li>
                <div>
                    <ul style={{paddingLeft: 10+'px'}}>
                        {props.clubs.map( (key, i) => (
                            <li>
                                <div>Team: {key.teamName} ID: {key.teamId}</div> <-- works as expected
                                <div>Games Played: {key.gamesPlayed.home}</div> <-- throws the error
                            </li>
                        ))}
                    </ul>
                </div>
            </li>
        </ul>
    )
}

Does it mean that I cannot have a nested object like this? It seems a bit limiting. It seems logical that I store the data like this - clubs is an array of objects, each one a football team with their games played that season.

Thank you

There're no any limitations for data stored in state. Probably some element of key.gamesPlayed[i].score is an object — Alex Vasilev
– Alex Vasilev, Commented Apr 14, 2019 at 20:17
Surely you do not need the index, each Object has gamesPlayed.score . Try it like {key.gamesPlayed.score} — dorriz
– dorriz, Commented Apr 14, 2019 at 20:21
I have removed the [i], it is now not throwing the error, but still doesn't actually render anything, i do not know why as the value of score is just a sting — Jonny
– Jonny, Commented Apr 14, 2019 at 20:26
please send in the complete Render code. what is wrapping the map ? — Amir-Mousavi
– Amir-Mousavi, Commented Apr 14, 2019 at 20:27

Peter Lehnhardt · Accepted Answer · 2019-04-14 21:15:46Z

1

When you write

<div>Games Played: {key.gamesPlayed.home}</div>

you basically tell react to create a div element with exactly two children:

The string 'Games Played: ',
Whatever key.gamesPlayed.home stores, in this case it is an array (Which is basically just an object in javascript)!

React on the other side requires, that children of any components must be either a string or another component. An array is none of that. So in order to make it work, you have to loop over the array and render the respective part of each array element. A short example from my side to replace above code snipped would be

<div>
  {key.gamesPlayed.map(game => (
    <div>{game.homeTeam}</div>
  )}
</div>

(Assuming game.homeTeam is a string!)

answered Apr 14, 2019 at 21:15

Peter Lehnhardt

5,0431 gold badge21 silver badges37 bronze badges

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

1 Comment

Jonny Over a year ago

Thank you for answering, but also for the explanation. It is working. That makes a lot of sense to me now. A lot of nested loops!

Collectives™ on Stack Overflow

Using nested objects in React state

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related