title: React - Load JSON and render component
body: <p>As the title says, I'm trying to render a React component which contains data that I grabbed from a JSON by loading it using fetch().</p>
  
  <p>The api call works just fine, but I'm not able to render the data.</p>
  
  <p>Here's the code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              user: {}
          }
      }
  
      getUserById(uId) {
          fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
              .then( (response) =&gt; {
                  return response.json()
              })
              .then( (json) =&gt; {
                  return json;
              });
      }
  
      componentDidMount() {
          this.setState({
              user: this.getUserById(4)
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;User&lt;/h1&gt;
                  &lt;p&gt;ID: {this.state.user.id}&lt;/p&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(
      &lt;App/&gt;,
      document.getElementById("container")
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea on solving this issue?</p>