title: OnChange not saving the written input value on setState
body: <p>This seems a silly question, so I apologize in advance.</p>
  
  <p>I have a page with several inputs and at the moment, for some reason, I can't just get the new value written in the input, so I can update the state and send this new data. Seems to me there is something wrong in with the onChange function, because I can get the previous state, but not the new value i'm saving on state.</p>
  
  <p>EDIT:
  The submit button is outside the input form.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>constructor(props) {
      super(props)
  
      this.state = {
          editMode: false,
          data: {
              designation: '', 
              address: '', 
              description: ''
          }
      }
  }
  
  componentDidMount = () =&gt; {
      const dataInfo = data.get('url here');//fetching data here
  
      const data = {
          designation: dataInfo.designation , 
          address: dataInfo.address, 
          description: dataInfo.description 
      }
  
      this.setState({
          data: data
      })
  }
  
  handleInput = (e) =&gt; {
  let value = e.target.value;
  let name = e.target.name;
  
  this.setState(
    prevState =&gt; ({
      data: {
        ...prevState.data,
        [name]: value
      }
    })
  );
  }
  
  handleFormSubmit = (e) =&gt; {
      e.preventDefault();
  
      const { data } = this.state;
  
      console.log('hey', data.designation);
  
      this.setState({
          editMode: false
      })
   }
  
     render() {
  
     {!this.state.editMode 
  ? &lt;button onClick={() =&gt; this.setState({ editMode: true })}&gt;edit&lt;/button&gt; 
  : &lt;div&gt;
     &lt;button 
     className={styles.buttonMargin} 
     onClick={() =&gt; this.setState({ editMode: false })}&gt;cancel&lt;/button&gt;
     &lt;button onClick={this.handleFormSubmit}&gt;Guardar&lt;/button&gt;
    &lt;/div&gt; 
      }
  
      &lt;div&gt;
        {this.state.editMode 
      ? &lt;form onSubmit={this.handleFormSubmit}&gt;
        &lt;input 
          type='text'
          placeholder='Nome do Campo' 
          name='designation' 
          onChange={this.handleInput} 
          defaultValue={this.state.data.designation}
        /&gt;
        &lt;/form&gt;
      : &lt;p&gt; {this.state.data.designation} &lt;/p&gt; }
      &lt;/div&gt;
   }
  }
  </code></pre>