title: Change checked attribute of controlled checkbox (React)
body: <p>I am new to React and am probably lacking the correct terminology to find a solution to my problem. It cannot be that hard.</p>
  
  <p>I am building a simple app which displays a set of questions, one question at a time. After answering one question, the next question is shown. </p>
  
  <p>I have a component <code>Question</code> that renders 3 checkboxes, each checkbox represents one possible <code>answer</code> to the Question.</p>
  
  <pre><code>{this.props.question.answers.map((answer, index) =&gt; {
    return (
      &lt;li className="Question__answer" key={answer.id}&gt;
        &lt;label className="Question__answer-label"&gt;
          &lt;input
            className="Question__answer-checkbox"
            type="checkbox"
            value={index}
            onChange={this.props.setAnswer}
            defaultChecked={false} /&gt;
          {answer.answer}
        &lt;/label&gt;
      &lt;/li&gt;
  
      ...
  
      &lt;button className="Question__next" type="button" onClick={this.props.onNext} disabled={this.props.isDisabled}&gt;
          Next question
        &lt;/button&gt;
    )
  })}
  </code></pre>
  
  <p>Inside my main component <code>Quiz</code> I call the component like this:</p>
  
  <p><code>&lt;Question step={this.state.step} question={this.state.questions[this.state.step]} setAnswer={this.setAnswer} onNext={this.onNext} isDisabled={this.isDisabled()} /&gt;</code></p>
  
  <p><code>onNext</code> is my function which increments <code>this.state.step</code> in order to display the next question:</p>
  
  <pre><code>onNext(event) {
      this.setState({step: this.state.step + 1});
  }
  </code></pre>
  
  <p>Everything works fine, except: When the next question is displayed, I want all 3 checkboxes to be unchecked again. Currently they remember their checked state from the previously answered question.</p>