How can I check which array element is correct or wrong and change component color?

my problem is the following, when I go to check which alternative of the question is correct or incorrect, when I click on one of the buttons it works correctly with a question of giving the color of the situation of the item (if it is right or wrong), but it it's rendering color for all buttons, not just the one the user clicked.

I created a data file

export const Questions = [
  {
  alternatives: [
    { answer: "OPT1", isCorrect: 1, alternative: 'A' },
    { answer: "OPT2", isCorrect: 2, alternative: 'B' },
    { answer: "OPT3", isCorrect: 2, alternative: 'C' },
    { answer: "OPT4", isCorrect: 2, alternative: 'D' },
  ]
]

Error example: The first alternative is the correct one, when I click on it, the color of all buttons are changed to green, the same happens for when the alternative is incorrect (but for red color), I would like to change only the color of the clicked button, not all

This file I'm checking the situation of the question and giving the colors, in my file Question Modal. I first import the previous data file, and I'm creating the state and the function for the conditionals

const questions = Questions ?? [];
const [isCorrectQuestion, setIsCorrectQuestion] = useState<number>()
const test = (isCorrect: number) => {
  if (isCorrect === 1) {
   setIsCorrectQuestion(1)
  }
  else if (isCorrect === 2) {
   setIsCorrectQuestion(2)
  }
}

Finally, when rendering the alternatives, I'm mapping my data array and using the style property to check which alternative is right or wrong

{questions[0].alternatives.map(e =>
 <Styles.Button
  onClick={() => test(e.isCorrect)}
  style={
         {
          backgroundColor:
          isCorrectQuestion === 1 ? 'green'
          : isCorrectQuestion === 2 ? 'red'
          : 'gray'
         }
        }
         >
          {e.answer}
         </Styles.Button>
  )}

I really can't say if I missed something unnoticed, or if it has some functionality or property that I don't know about and I'm not using it, but I wanted to know if following my logic I could make the button that is going to be clicked can only change the color.

Rather than storing whether the alternative they selected was correct, you could instead store the ID of the selected alternative and then determine whether it should be 'green' or 'red' based on the state of each individual alternative.

const questions = Questions ?? [];
const [selectedAlternative, setSelectedAlternative] = useState<string>(); // 'A' || 'B' || 'C' || 'D'

return (
  <div>
    {questions[0].alternatives.map((alt) => (
      <Styles.Button
        onClick={() => setSelectedAlternative(alt.alternative)}
        style={{
          backgroundColor:
            selectedAlternative === alt.alternative
              ? alt.isCorrect === 1
                ? 'green'
                : 'red'
              : 'gray'
        }}
      >
        {alt.answer}
      </Styles.Button>
    ))}
  </div>
);

You are using a single state for all of the answers, that's why all answers are affected.

I would suggest trying out the following solution:

• pass clicked answer index to the test function and store it in a state, update isCorrectQuestion to be a Boolean:

const [selectedAnswerIndex, setSelectedAnswerIndex] = useState<number>();
const [isCorrectQuestion, setIsCorrectQuestion] = useState<boolean>()
const test = (isCorrect: number, answerIndex: number) => {
  setSelectedAnswerIndex(answerIndex);
  if (isCorrect === 1) {
   setIsCorrectQuestion(true);
  }
  else if (isCorrect === 2) {
   setIsCorrectQuestion(false);
  }
}

Then update your JSX as follows:

{questions[0].alternatives.map((e, i) =>
 <Styles.Button
  onClick={() => test(e.isCorrect, i)}
  style={
         {
          backgroundColor:
          isCorrectQuestion && selectedAnswerIndex === i ? 'green'
          : !isCorrectQuestion && selectedAnswerIndex === i ? 'red'
          : 'gray'
         }
        }
         >
          {e.answer}
         </Styles.Button>
  )}