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

Question

I am getting the following warning:

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

What causes this error and how can I fix it?

Answer 1

This error happens if you try to interpolate a JavaScript object (rather than a JSX element or string) into some JSX.

For example, here's a small case that produces the warning:

import React from 'react';
window.React = React;
import ReactDOM from 'react-dom';
var content = {foo: 'bar'};
ReactDOM.render(<div>{content}</div>, document.getElementById('some-element'));

Although the error message suggests using createFragment to fix this, the more likely scenario is that you're interpolating a variable into some JSX that you thought was a string or JSX element, but is in fact some other kind of object.

Since the message doesn't tell you exactly which expression in your JSX caused the error, you'll have to track it down by other means - for instance, by looking over the diff in source control of the commit that produced the error, or by eliminating half of your JSX elements at a time until you find the one that makes the error go away.

Answer 2

Also had this issue, but my cause was slightly different.

I was attempting to write out a value inside of an object like so:

var FooObject = React.createClass({
    render: function() {
        var object_to_write = {'foo': 'bar'};
        return (
            <div>
                I expect this text to say <b>bar</b> and it says <b>{object_to_write}</b>
            </div>
            );
    }
});

React gave me the keyed object should be wrapped error...

But of course, my error was caused by me not specifying which value I wanted to use (in this example, foo), and it was trying to render out the entire object.

Answer 3

Another case:

// Bad - this causes the warning
this.state = { content: {} }

render() {
  return (
    <div>
      {this.state.content}
    </div>
  )
}

Don't render Object, but String instead.

// Good - no complaints 
this.state = { content: "" }

render() {
  return (
    <div>
      {this.state.content}
    </div>
  )
}