title: React form input not changing on edit
body: <p>I have an app where I am trying to allow users to update the text of a "task/to-do" item. When the user hits the "edit" button, the edit component renders properly, but the input fields don't allow editing. </p>
  
  <p>I'm suspicious I'm not passing props properly or updating state properly, but the React tab of the Chrome dev tools seems to have things right...</p>
  
  <p>Here's the first part of the component:</p>
  
  <pre><code>class Task extends Component {
    constructor(props) {
      super(props)
      this.state = {
        editingTask: false,
        id: this.props.id,
        task: this.props.task,
        timeNeeded: this.props.timeNeeded,
        dueDate: this.props.dueDate
      }
  </code></pre>
  
  <p>....</p>
  
  <pre><code>handleChange(event) {
    const key = event.target.name
    const value = event.target.value
    this.setState({
      [key]: value
    })
  }
  </code></pre>
  
  <p>........        </p>
  
  <p>And here is the render:</p>
  
  <pre><code>    render () {
  const { task, timeNeeded, timeLeft, dueDate, id } = this.props
  if (this.state.editingTask) {
    return (
      &lt;div className='addTaskFormDiv'&gt;
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label&gt;
        Task:
            &lt;input type='text' name='task' value={task} onChange={this.handleChange} /&gt;
          &lt;/label&gt;
          &lt;label&gt;
          Time needed:
            &lt;input type='text' name='timeNeeded' value={timeNeeded} onChange={this.handleChange} /&gt;
          &lt;/label&gt;
          &lt;label&gt;
          Due date:
            &lt;DatePicker
              className='dueDate'
              dateFormat='YYYY/MM/DD'
              // selected={this.props.dueDate}
              onChange={this.handleDateChange} /&gt;
            {/* Date picker is not closing on selection. */}
          &lt;/label&gt;
          &lt;button className='formSubmit' onClick={this.handleSubmit} value='Submit'&gt;Done&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  </code></pre>
  
  <p>......</p>
  
  <p>Full code on GitHub (development branch), the Task.js file is the one I am working on: <a href="https://github.com/emachaffie/timeboxer/tree/development" rel="nofollow noreferrer">https://github.com/emachaffie/timeboxer/tree/development</a></p>
  
  <p>Any help is much appreciated!</p>