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 the browser's console?

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

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 the browser's console?

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

• javascript
• reactjs

4 Answers 4

I put together a JSBin for you. Basically, the warning es from this line:

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

It's because playerData is an object and ReactJS doesn't know how to render it.

If you change that to the following, it won't give you the warning:

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

Why am I getting this error in the browser's console?

Because you are passing an object (playerData) as child to a React Component.

I tend to run into this when rendering a Date object by mistake. You need to stringify these manually:

Produces warning:

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

Works ok:

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

Does this work?

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

           <div>      
             <RouteHandler />
           </div>;
       </div>
}