React.js: Passing nested props into React.createElement

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>