错误：对象作为 React 子对象无效（在 Promise.all 内）

Question

I am creating React practice project and I am still dealing with this kind of error (Objects are not valid as a React child). More in screenshot below.

Thrown error

You can see problem part of code in that screenshot too .

Some explanation: This piece of code is a part inside an useEffect ( this useEffect content is executed only if fixturesIds aren't undefined) . Then some get requests are pushed into an array predictionList and they are resolved together in Promise.all . Promise.all returns an array which I map to get required data. This all ( prediction.value.data ) is setted as a state ( setFixturesDetails ).

Prediction.value.data looks like: [{..}, {..}, {..}, {..}]

It worked very well, when I logged it into console.

But when I tried to use this array of objects as a props in Component (see below)...

return (
    <div className='App'>
      {fixturesDetails.length > 0 ? (
        fixturesDetails.map((details) => (
          <Prediction
            homeTeam={details.teams.home.name}
            awayTeam={details.teams.away.name}
            winner={details.predictions.winner}
          />
        ))
      ) : (
        <h2>Loading</h2>
      )}
    </div>

...it has started to throw a mentioned Error .

Loading appears normally and it crashes when fixturesDetails are setted ( fixturesDetails.length > 0 is true),

so instead of showing Prediction component it shows that error.

Any ideas why does it throw that error? I researched a lot but I am still not able to figure it out.

Thanks!

Answer 1

Well, I have just figured it out.

The problem is that it is not possible to use object as a props in JSX syntax.

I logged all my props in the console and found out that one of my props is really an object.

Solution is pretty clear, just choose right property inside an object. If there is complicated API with nested objects it can be very easy to overlook you are actually returning an object within prop.

Maybe it will help someone someday:)