title: Best practice to handle data from api in React
body: <p>I'm working on one of my first react projects and got this question.</p>
  <p>What is the best way to handle and store data in react with using <code>this.state</code>?</p>
  <p>My current workflow:</p>
  <ol>
  <li>fetch data from api in <code>componentDidMount()</code></li>
  <li>storing the data in <code>this.state</code> (for example in <code>this.state.account_data</code> as child object`</li>
  <li>using the data in <code>value</code> attributes of controls like <code>&lt;input&gt;</code> in this way: <code>this.state.account_data.username</code></li>
  <li>each control has his own <code>onChange</code>-handler <code>onChange={e =&gt; this.onChangeUsername(e)}</code></li>
  </ol>
  <p>The method <code>onChangeUsername(e)</code> changes <code>this.state</code> with <code>this.setState({username: e.target.value})</code>.</p>
  <p>So, the problem is: After changing the unsername control value, I have two variants of the username in <code>this.state</code>: <code>this.state.account_data.username</code> and <code>this.state.username</code>. That requires to create another part of code to update <code>this.state.account_data</code>, because I want to send the new data to the API by <code>UserService.update(this.state.account_data)</code>.</p>
  <p>Is there an easier way or what is the best practice?</p>