title: React input element's onChange using setState() doesn't work
body: <p>I want to make an app so that when text is typed in input element this will reflect that change in output. So far the updating doesn't work :(</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import UserInput from './UserInput/UserInput';
  import UserOutput from './UserOutput/UserOutput';
  
  class App extends Component {
    state = {
      user: [
        { username: 'Kai' },
        { username: 'Orange' }
      ]
    }
  
    inputChangeHandler = (e) =&gt; {
      this.setState(
        {
          user: [
            { username: e.target.value },
            { username: e.target.value }
          ]
        }
      )
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;UserInput onChange={this.inputChangeHandler} /&gt;
          &lt;UserOutput username={this.state.user[0].username} /&gt;
          &lt;UserOutput username={this.state.user[1].username} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Change in text typed in input element should be reflected as username rendered in UserOutput. This doesn't work.</p>
  
  <p>Here are codes for other components...</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class UserInput extends Component
  {
      render() {
          return(
              &lt;div&gt;
                  &lt;input /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default UserInput;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class UserOutput extends Component
  {
      render() {
          return(
              &lt;div&gt;
                  &lt;p&gt;First paragraph and my name is {this.props.username}&lt;/p&gt;
                  &lt;p&gt;Second paragraph &lt;/p&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default UserOutput;
  </code></pre>