title: Can't set React state with defaultValue
body: <p>I'm trying to make the user profile editable in my component. Right now, when the user clicks "edit," the profile is replaced with a form that has the values they typed in as defaults. However, if they update only one field, the others get rewritten with blank values instead of passing the default value to the state.</p>
  
  <p>Is there a way to pass the defaultValue to the state? I've tried value={} too but then the value doesn't change at all.</p>
  
  <p>I'm trying to avoid having an "Edit" button for each input.</p>
  
  <pre><code>class AccountEditor extends Component {
    constructor() {
      super()
      this.state = {
        isEditing: false,
        profile: {
          firstName: '',
          lastName: '',
          city: '',
          email: '',
          bio: '',
        }
      }
    }
  
    toggleEdit(event) {
      event.preventDefault()
      this.setState({
        isEditing: !this.state.isEditing
      })
    }
  
    updateProfile(event) {
      let updatedProfile = Object.assign({}, this.state.profile)
      updatedProfile[event.target.id] = event.target.value
  
      this.setState({
        profile: updatedProfile
      }
    }
  
    submitUpdate(event) {
      event.preventDefault()
      this.props.onUpdate(this.state.profile)
      this.setState({
        isEditing: !this.state.isEditing
      })
    }
  
    render() {
      let profile = this.props.profile
      let content = null
  
      if (this.state.isEditing == true) {
        content = (
          &lt;div&gt;
            &lt;input
              id="firstName"
              onChange={this.updateProfile.bind(this)}
              defaultValue={profile.firstName} /&gt;
            &lt;br /&gt;
            &lt;input
              id="lastName"
              onChange={this.updateProfile.bind(this)}
              defaultValue={profile.lastName} /&gt;
            &lt;br /&gt;
            &lt;input
              id="city"
              onChange={this.updateProfile.bind(this)}
              defaultValue={profile.city} /&gt;
            &lt;br /&gt;
            &lt;input
              id="email"
              onChange={this.updateProfile.bind(this)}
              defaultValue={profile.email} /&gt;
            &lt;br /&gt;
            &lt;textarea
              id="bio"
              onChange={this.updateProfile.bind(this)}
              defaultValue={profile.bio} /&gt;
            &lt;br /&gt;
            &lt;button onClick={this.submitUpdate.bind(this)}&gt;Done&lt;/button&gt;
          &lt;/div&gt;
        )
      } else {
        content = (
          &lt;div&gt;
            &lt;h4&gt;Name: &lt;/h4&gt;
            &lt;span&gt;{profile.firstName}&lt;/span&gt;
            &lt;span&gt;{profile.lastName}&lt;/span&gt;&lt;br/&gt;
            &lt;h4&gt;City: &lt;/h4&gt;
            &lt;span&gt;{profile.city}&lt;/span&gt;&lt;br/&gt;
            &lt;h4&gt;Bio :&lt;/h4&gt;
            &lt;p&gt;{profile.bio}&lt;/p&gt;&lt;br /&gt;
            &lt;button onClick={this.toggleEdit.bind(this)}&gt;Edit&lt;/button&gt;
          &lt;/div&gt;
        )
      }
  
      return (
        &lt;div&gt;
          {content}
        &lt;/div&gt;
      )
    }
  }
  
  export default AccountEditor
  </code></pre>