I have code of the form

props = { user: {userattr1: 1, userattr2: 2}};
var element = React.createElement(MyReactClass, props);

i.e., where props is a nested object. When I try to compile the above code I get the error:

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

I've been looking online and it seems that nested objects are perfectly permissible as props. How can I resolve my error?

Edit: MyReactClass looks something like this:

var MyReactClass = React.createClass({
  render: function () {
    <div>{this.props.user}</div>
  }
})

I have code of the form

props = { user: {userattr1: 1, userattr2: 2}};
var element = React.createElement(MyReactClass, props);

i.e., where props is a nested object. When I try to compile the above code I get the error:

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

I've been looking online and it seems that nested objects are perfectly permissible as props. How can I resolve my error?

Edit: MyReactClass looks something like this:

var MyReactClass = React.createClass({
  render: function () {
    <div>{this.props.user}</div>
  }
})

• javascript
• reactjs

• 1 You don't get an error but a warning – Giuseppe Pes Commented May 25, 2015 at 14:16
• 1 Can you reproduce this in a jsfiddle. I think your problem is elsewhere, not the props. How is MyReactClass defined? – WayneC Commented May 25, 2015 at 14:24

2 Answers 2

I don't think the problem, you are having is related to a nested object as props. Here it is an example:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.user.name}</div>;
    }
});

var props = { user: {name: "World"}};
React.render(React.createElement(Hello, props), document.getElementById('container'));

https://jsfiddle.net/urjmndzk

More likely, your problem is related to how you are setting the keys of the children components. However, it is hard to tell without seeing the entire code.

This is a link to the creeateFragment function, it may help you. https://facebook.github.io/react/docs/create-fragment.html

If you're using JSX, you can also pass a nested object as a prop by building the object like this:

<HelloWorldClass user={{name:'Kyle'}} />

Syntax Example in Stack Snipets

// function component syntax
function HelloWorldFunc(props) {
  return (
    <div>Hello, {props.user.name} </div>
  );
}
// class component syntax
class HelloWorldClass extends React.Component {
  render() {
    return (
      <div >
        Hello, {this.props.user.name}
      </div>
    );
  }
}

// createElement syntax
const helloCreate = React.createElement(HelloWorldFunc, {user:{name:'Kyle'}});
// JSX syntax
const helloJSX = <HelloWorldClass user={{name:'Kyle'}} />

ReactDOM.render(
  <div>
    {helloCreate}
    {helloJSX}
  </div>
,document.querySelector("#root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>