title: Invariant Violation: Objects are not valid as a React child (for nested objects)
body: <p>in my react component I have an object <code>user</code> which looks like</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>{
    _id: xxx, 
    stats: {a: 1, b: 2, c: 3},
    shops: [s1, s2, s3] // s1, s2, s3 are all objects
    ...
  }
  </code></pre>
  
  <p>And then in my code I specify that it is an object. </p>
  
  <pre class="lang-js prettyprint-override"><code>export class UserComponent extends React.Component&lt;void, Props, void&gt; {
    static propTypes = {
      user: PropTypes.array,
      fetchProfile: PropTypes.func.isRequired
    };
  
    componentDidMount() {
      this.props.fetchProfile();
    }
  
    render () {
      const { user } = this.props;
      return (
        &lt;div className='container text-center'&gt;
          {user}
          &lt;Link to="/"&gt;homeE&lt;/Link&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>But when I run the code the error message says: </p>
  
  <p><code>invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {thumb, path, photo_id, shop_id, message, _id, date_added}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.invaria....</code></p>
  
  <p>it seems that I can do something like <code>createFragment(user)</code>. But this is not working for me because this object has a lot of nested objects like the above.</p>
  
  <p>Does anyone know how do solve this? </p>