title: Can't use checkbox correctly to update state
body: <p>I am using a checkbox that should update a todo item's completed status via the component's state. When I click the todo box it doesn't change state, but if I click it two times, it does update the state. Since I have to click it two times, that means when the box is checked this.state.done === false and when it is uncheck this.state.done === true. I don't know why it doesn't flip the state on the first click. The checkbox is controlled by <strong>handleDoneChange()</strong>. Could someone tell me why the checkbox doesn't change the state on the first click?</p>
  
  <pre><code>class ShowTodo extends Component {
  
      static contextTypes = {
          router: PropTypes.object
      };
  
      constructor(props) {
          super(props);
  
          this.state = {
              descriptionChanged: false,
              newDescription: '',
              newTitle: '',
              done: false
          };
  
  
          this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
          this.handleDeleteClick = this.handleDeleteClick.bind(this);
          this.changeButtons = this.changeButtons.bind(this);
          this.handleSaveClick = this.handleSaveClick.bind(this);
          this.handleUndoClick = this.handleUndoClick.bind(this);
          this.handleTitleChange = this.handleTitleChange.bind(this);
          this.handleDoneChange = this.handleDoneChange.bind(this);
      }
  
      componentWillMount() {
          this.props.fetchTodo(this.props.params.id).then(() =&gt; {
              this.setState({
                  newDescription: this.props.todo.description,
                  newTitle: this.props.todo.title,
                  done: this.props.todo.completed
              });
              console.log("This is the todo's starting completed status: ", this.state.done);
          });
      }
  
      render() { 
  
          const { todo } = this.props;
  
          if (!todo) {
              return (
                  &lt;h3&gt;Loading...&lt;/h3&gt;
              );
          }
  
          return (
              &lt;div className="input-group"&gt;
                  &lt;Link to="/todos_index"&gt;Back&lt;/Link&gt;
                  &lt;h3&gt;Title&lt;/h3&gt;
                  &lt;input 
                      type="text" 
                      className="form-control"
                      value={this.state.newTitle}
                      onChange={this.handleTitleChange} /&gt;
                  &lt;textarea 
                      className="form-control" 
                      value={this.state.newDescription}
                      onChange={this.handleDescriptionChange}&gt;
                  &lt;/textarea&gt;
                  &lt;span className="input-group-addon"&gt;
                      &lt;input type="checkbox"
                        onClick={this.handleDoneChange} /&gt;
                  &lt;/span&gt;
                  &lt;span className="input-group-btn"&gt;
                      {this.changeButtons()}
                      &lt;button onClick={this.handleDeleteClick} className="btn btn-danger pull-xs-right"&gt;Delete Post&lt;/button&gt;
                  &lt;/span&gt;
  
  
              &lt;/div&gt;
          );
      }
  
      changeButtons() {
          if (!this.state.descriptionChanged) {
              return null;
          } else {
  
              return [
              &lt;button 
                className="btn btn-default"
                onClick={this.handleSaveClick}
                &gt;Save&lt;/button&gt;,
              &lt;button 
                className="btn btn-default"
                onClick={this.handleUndoClick}
                &gt;Undo&lt;/button&gt;
             ];
          }
      }
  
      handleDescriptionChange(event) {
          this.setState({
              descriptionChanged: true,
              newDescription: event.target.value
          });
          console.log('New description in state: ', this.state.newDescription);
      }
  
      handleTitleChange(event) {
          this.setState({
              descriptionChanged: true,
              newTitle: event.target.value
          });
      }
  
      handleDoneChange(event) { //This isn't updating the done status
  
          this.setState({
              done: !this.state.done
          });
  
          var id = this.props.params.id;
  
          var props = {
              completed: this.state.done
          };
  
          console.log(props);
  
          this.props.updateTodo(id, JSON.stringify(props));
  
      }
  
      handleDeleteClick(event) {
          this.props.deleteTodo(this.props.params.id).then(() =&gt; {
              this.context.router.push('/todos_index');
          });
      }
  
      handleSaveClick(event) {
          var id = this.props.params.id;
          var props = {
              title: this.state.newTitle,
              description: this.state.newDescription
          };
          this.props.updateTodo(id, JSON.stringify(props)).then(() =&gt; {
              this.context.router.push('/todos_index');
          });
      }
  
      handleUndoClick() {
          this.setState({
              descriptionChanged: false,
              newTitle: this.props.todo.title,
              newDescription: this.props.todo.description
  
          });
      }
  }
  
  function mapStateToProps(state) {
      return { todo: state.todos.todo };
  }
  
  export default connect(mapStateToProps, { fetchTodo, updateTodo, deleteTodo })(ShowTodo);
  </code></pre>