Any use of a keyed object should be wrapped in React.addons.createFragment(object)

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 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.

Answer 1

I put together a JSBin for you. Basically, the warning comes 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>
);

Answer 2

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

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