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


source to share





All Articles