Problems with React.Addons.CreateFragment

We recently updated React to 0.13 and this little warning is starting to appear:

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

Here is my code, tried to figure out how to use createFragment but couldn't find good examples of how to do it when wrapping elements from this.props.children.

This.props.children in my case will be other React components that need to be wrapped in li. Have any of you seen or solved this problem before?

import React from 'react';

module.exports = React.createClass({
  displayName: "public/src/scripts/components/info-block/infoItem.js",
  propTypes: {
    label: React.PropTypes.string,
    children: React.PropTypes.any
  },
  renderChildren: function(){
    var elementsToRender = [].concat(this.props.children);

    return elementsToRender.map(function(elem, i){
      return <li key={i}>{elem}</li>
    });
  },
  render : function(){
    return (
      <li>
        <span className="ll">{this.props.label}</span>
        <span className="lr">
          <ul>
            {this.renderChildren()}
          </ul>
        </span>
      </li>
    );
  }
});

      

I tried to switch renderChildren method to this:

renderChildren: function(){
  return React.Children.map(this.props.children, function(elem){
    return React.addons.createFragment({value: <li>{elem}</li>});
  });
}

      

It will then display, but I still get the warning

+3
javascript reactjs


source to share


No one has answered this question yet

Check out similar questions:

286
Invariant violation: objects are invalid as child regent
42
React: checker is not a function
21
Objects are not valid as a responsive child (in Internet Explorer 11 for React 15.4.1)
fourteen
When to use React createFragment?
12
React.Children.map recursively?
6
Uncaught TypeError: store.getState is not a function
2
Invariant violation when trying to display an array of table row elements
1
Objects not valid as child of React (found: object with keys)
0
Warning. Any use of an object with a key must be wrapped in the React.addons.createFragment (object) file before being passed as a child
-1
Getting warning using react 0.13 - Any use of a keyed object must be wrapped in a React.addons.createFragment (object) file before being passed as a child



All Articles
Loading...
X
Show
Funny
Dev
Pics