Any use of an object with a key must be wrapped in a React.addons.createFragment (object) file

Question

let playerInfo = [{ name: 'jose', country: 'USA', age: 47 }]; export default class PlayersInfo extends React.Component { static getProps() { return {}; } render() { let playerInf = playerInfo.map((playerData, index) => { return <div className="item" key={index}>{playerData}</div> }); return <div> <div> {playerInf} </div> <RouteHandler /> </div>; } 

Why am I getting this error in my browser console?

Warning. Any use of an object with a key must be wrapped in a React.addons.createFragment (object) file before being passed as a child.

Answer 1

I have compiled JSBin for you. Basically a warning appears from this line:

 return <div className="item" key={index}>{playerData}</div> 

This is because playerData is an object, and ReactJS does not know how to display it.

If you change this to the following, it will not give you a warning:

 return ( <div className="item" key={index}> <div>Name: {playerData.name}</div> <div>Country: {playerData.country}</div> <div>Age: {playerData.age}</div> </div> ); 

Answer 2

Why am I getting this error in my browser console?

Because you are passing an object ( playerData ) as a child of the React component.

Answer 3

I usually come across this when rendering a Date object by mistake. You need to execute them manually:

It gives a warning:

 <div>{ new Date() }</div> 

Works fine:

 <div>{ String(new Date()) }</div> 

Answer 4

It works?

 return <div> <div> {playerInf} </div> <div> <RouteHandler /> </div>; </div> }