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>
  }
})

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

<!-- begin snippet: js hide: false console: true babel: true --> <!-- language: lang-js -->
// 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"));
<!-- language: lang-html -->
<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>
<!-- end snippet -->