React always trigger a warning with a very simple dom hierarchy:

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

<div id="content">
    <div data-reactid=".0">
        <div data-reactid=".0.0">
            <div data-reactid=".0.0.$chaptersNodes:0:0"></div>
            <div data-reactid=".0.0.$chaptersNodes:0:1"></div>
            <div data-reactid=".0.0.$chaptersNodes:0:2"></div>
         </div>
    </div>
 </div>

Code is generating children from a data array stored in props field, I have simplified it.

var ChapterList = React.createClass({
  render: function() {    

        if (this.props.data) {
            chaptersNodes = this.props.data.map(function(section, index) {
                // here normally generating sub children but simplified here
                return React.DOM.div({});
            });
        });

        return React.DOM.div({}, {chaptersNodes});
    }

    return React.DOM.div();

  }
});

I have tried different way with keys.. but nothing changed...any ideas ?

React always trigger a warning with a very simple dom hierarchy:

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

<div id="content">
    <div data-reactid=".0">
        <div data-reactid=".0.0">
            <div data-reactid=".0.0.$chaptersNodes:0:0"></div>
            <div data-reactid=".0.0.$chaptersNodes:0:1"></div>
            <div data-reactid=".0.0.$chaptersNodes:0:2"></div>
         </div>
    </div>
 </div>

Code is generating children from a data array stored in props field, I have simplified it.

var ChapterList = React.createClass({
  render: function() {    

        if (this.props.data) {
            chaptersNodes = this.props.data.map(function(section, index) {
                // here normally generating sub children but simplified here
                return React.DOM.div({});
            });
        });

        return React.DOM.div({}, {chaptersNodes});
    }

    return React.DOM.div();

  }
});

I have tried different way with keys.. but nothing changed...any ideas ?

• javascript
• reactjs

1 Answer 1

If you're transpiling code with Babel or the JSX transformer with the harmony flag, or using a browser which supports ES6 object literal shorthand, this line:

return React.DOM.div({}, {chaptersNodes})

Is actually equivalent to:

return React.DOM.div({}, {chaptersNodes: chaptersNodes})

React lets you specify ponent keys by returning a key-to-ponent Object; you're getting the warning because you're unintentionally passing an Object as this ponent's children.

Dropping the curly braces around chaptersNodes should fix this:

return React.DOM.div({}, chaptersNodes)