CODEWITHSUNDEEP
javascriptreactjs
Non
Non

Reputation: 8589

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

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.

Upvotes: 4

Views: 2284

Answers (4)

SystemParadox
SystemParadox

Reputation: 8647

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>

Upvotes: 1

Brian Park
Brian Park

Reputation: 2577

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>
);

Upvotes: 6

Felix Kling
Felix Kling

Reputation: 816790

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

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

Upvotes: 2

Levi Robertson
Levi Robertson

Reputation: 9

Does this work?

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

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

Upvotes: 0

Related Questions