title: React controlled input
body: <p>I made a simple react controlled input that store the value in a state and i dont understand why when i press a key for the first time the console log shows "".</p>
  
  <p>Here is my code</p>
  
  <pre><code>
  class Form extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        value: "",
      };
    }
  
    handleForm = (e) =&gt; {
      console.log("test");
  
      e.preventDefault();
    };
  
    handleUsername = (e) =&gt; {
      this.setState({ value: e.target.value });
  
      console.log(this.state);
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;div&gt;
            &lt;form onSubmit={this.handleForm}&gt;
              &lt;input
                onChange={this.handleUsername}
                type="text"
                placeholder="username"
                value={this.state.value}
              /&gt;
              &lt;input type="submit" /&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default Form;
  </code></pre>