title: Change color of button in a quiz depending on answer in React Native
body: <p>I have a quiz written in React Native. When the user presses the right answer, I want the button to become green before moving to the next question. If it's wrong, I want the right answer to become green and the pressed button to become red. I'm quite new to React and not sure how to change state of only a particular button. How it looks now, all buttons becomes red/green as I set the background color for all the buttons.</p>
  
  <p>Quiz screen:</p>
  
  <pre><code>  state = {
      correctCount: 0,
      totalCount: this.props.navigation.getParam("questions", []).length,
      activeQuestionIndex: 0,
      answered: false,
      answerCorrect: false,
      btnColor: {backgroundColor: '#FFDD7C'}
    };
  
    answer = correct =&gt; {
      this.setState(
        state =&gt; {
          const nextState = { answered: true };
  
          if (correct) {
            nextState.correctCount = state.correctCount + 1;
            nextState.answerCorrect = true;
            nextState.btnColor = {backgroundColor: '#00ff00'};
          } else {
            nextState.answerCorrect = false;
            nextState.btnColor = {backgroundColor: '#ff0000'};
          }
  
          return nextState;
        },
        () =&gt; {
          setTimeout(() =&gt; this.nextQuestion(), 750);
        }
      );
    };
  
    nextQuestion = () =&gt; {
      this.setState(state =&gt; {
        const nextIndex = state.activeQuestionIndex + 1;
  
        if (nextIndex &gt;= state.totalCount) {
          this.props.navigation.navigate('QuizStatsScreen', {
            totalQuizCount: state.totalCount,
            correctQuizCount: state.correctCount
          });
        } else {
          return {
            activeQuestionIndex: nextIndex,
            answered: false,
            btnColor: {backgroundColor: '#FFDD7C'}
          }
        }
      });
    };
  
    render() {
      const questions = this.props.navigation.getParam("questions", []);
      const question = questions[this.state.activeQuestionIndex];
  
      return (
        &lt;View&gt;
          &lt;StatusBar barStyle="light-content" /&gt;
          &lt;SafeAreaView style={styles.safearea}&gt;
            &lt;View&gt;
              &lt;Text style={styles.text}&gt;{question.question}&lt;/Text&gt;
  
              &lt;ButtonContainer&gt;
                {question.answers.map(answer =&gt; (
                  &lt;Button
                    key={answer.id}
                    text={answer.text}
                    onPress={() =&gt; this.answer(answer.correct)}
                    style={this.state.btnColor}
                    correct={this.state.answerCorrect}
                  /&gt;
                ))}
              &lt;/ButtonContainer&gt;
            &lt;/View&gt;
          &lt;/SafeAreaView&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Button screen:</p>
  
  <pre><code>export const Button = ({ correct, text, style, onPress = () =&gt; {} }) =&gt; {
  
    return (
      &lt;TouchableOpacity onPress={onPress} style={[styles.button, {...style}]}&gt;
        &lt;Text style={styles.text}&gt;{text}&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  };
  </code></pre>