title: Posting changed form field values in React
body: <p>I have a form which is passed a value through props, and submits to an endpoint to update a users information. However, I'm unable to send an edited value of the text input field, as its state needs to be managed and updated when a user changes its value, but having trouble setting/updating the state of the input when the user changes the value, allowing a different value to be posted.</p>
  
  <pre><code>class DisplayNameModal extends React.Component {
    constructor (props){
      super(props)
      this.state = {
        displayName: this.props.displayName,
        email: this.props.email.split('@')[0]
      }
      this.updateDisplayName = this.updateDisplayName.bind(this)
    }
  
    updateDisplayName () {
      const email = this.props.email
      const displayName = this.state.displayName
      const user = {
        email,
        displayName
      }
      superagent
        .put('/api/user')
        .send({user})
        .then(this.closeModal)
    }
  
    handleDisplayNameChange = e =&gt; this.setState({ displayName: e.target.value })
  
    render (props) {
      const {contentStrings} = this.props.config
  
      return (
        &lt;div&gt;
        { !this.props.displayNameModalActive &amp;&amp;
        &lt;div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}&gt;
          &lt;div className='display-name-content'&gt;
            &lt;h2 className='heading'&gt;{contentStrings.displayNameModal.heading}&lt;/h2&gt;
            &lt;p&gt;{contentStrings.displayNameModal.subHeading}&lt;/p&gt;
            &lt;input type="text"
               defaultValue={this.state.displayName}
               onChange={this.handleDisplayNameChange}
               minLength="3"
               maxLength="15"/&gt;
            &lt;button
              type='submit'
              onClick={this.updateDisplayName}
              className='btn btn--primary btn--md'&gt;
              &lt;span&gt;{contentStrings.displayNameModal.button}&lt;/span&gt;
            &lt;/button&gt;
            &lt;p className='cancel'&gt;{contentStrings.displayNameModal.cancel}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      }
      &lt;/div&gt;
      )
    }
  }
  
  export default DisplayNameModal
  </code></pre>