Question

119

React.js: Passing nested props into React.createElement

rated 0 times [ 122] [ 3] / answers: 1 / hits: 32917 / 9 Years ago, mon, may 25, 2015, 12:00:00

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>

  }

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alonso

Add To Favorites

Follow

Total Points: 747

Total Questions: 108

Total Answers: 105

Location: Mauritania

Member since Sun, Sep 25, 2022

2 Years ago

answered 9 Years ago havenbilliec · Accepted Answer

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