Re10-react-quiz > src > components > Options.js | onClick Behavior Not Limited to Individual Button

[devYuraKim]

I expected the onClick result to affect only the clicked button, but it's actually affecting the entire set of buttons.

function Options({ question }) {
  const [result, setResult] = useState("");

  return (
    <div className="options">
      {question.options.map((option, i) => (
        <button
          className={`btn btn-option ${result}`}
          key={i}
          onClick={() =>
            i === question.correctOption
              ? setResult("correct")
              : setResult("wrong")
          }
        >
          {option}
        </button>
      ))}
    </div>
  );
}

[devYuraKim]

When a button is clicked, change the color of all buttons based on whether they are the correct option.

function Options({ question }) {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <div className="options">
      {question.options.map((option, i) => (
        <button
          className={`btn btn-option ${
            selectedOption !== null
              ? i === question.correctOption
                ? "correct"
                : "wrong"
              : ""
          }`}
          key={i}
          onClick={() => {
            setSelectedOption(i);
          }}
        >
          {option}
        </button>
      ))}
    </div>
  );
}

[devYuraKim]

When a button is clicked, only change the color of the button clicked, leaving the other buttons unchanged

function Options({ question }) {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <div className="options">
      {question.options.map((option, i) => (
        <button
          className={`btn btn-option ${
            selectedOption === i
              ? i === question.correctOption
                ? "correct"
                : "wrong"
              : ""
          }`}
          key={i}
          onClick={() => {
            setSelectedOption(i);
          }}
        >
          {option}
        </button>
      ))}
    </div>
  );
}

[devYuraKim]

Key Differences

Code1 - All Buttons Change Color Based on Correct Option After Any Click

const [result, setResult] = useState("");
<button
          className={`btn btn-option ${result}`}
          key={i}
          onClick={() =>
            i === question.correctOption
              ? setResult("correct")
              : setResult("wrong")
          }
        >

Code2 - All Buttons Show Correct/Wrong Status After One Click

const [selectedOption, setSelectedOption] = useState(null);
<button
   className={`btn btn-option ${
            selectedOption !== null
              ? i === question.correctOption
                ? "correct"
                : "wrong"
              : ""
          }`}
          key={i}
          onClick={() => {
            setSelectedOption(i);
          }}
        >

Code3 - Only the Clicked Button Shows Correct/Wrong Status

const [selectedOption, setSelectedOption] = useState(null);
<button
          className={`btn btn-option ${
            selectedOption === i
              ? i === question.correctOption
                ? "correct"
                : "wrong"
              : ""
          }`}
          key={i}
          onClick={() => {
            setSelectedOption(i);
          }}
        >

1. State Management:

• Code 1: The result state applies universally to all buttons, so all buttons receive the same "correct" or "wrong" style, regardless of which one is clicked.

• Code 2 & 3: The selectedOption state stores the index of the clicked button, allowing each button to be styled based on whether it's the correct option or not.

2. Button Styling Behavior:

• Code 1: All buttons change to the same style after any button is clicked, either all showing "correct" or all showing "wrong".
• Code 2: After one button is clicked, all buttons reflect their correct or incorrect status, with the correct button styled as "correct" and the others as "wrong".
• Code 3: Only the clicked button changes its style based on whether it's correct or wrong. Other buttons remain unchanged.

3. Effect of Button Click:

• Code 1: Affects the entire set of buttons uniformly.
• Code 2: Affects all buttons, showing their respective correctness.
• Code 3: Affects only the clicked button, leaving the others in their original state.

[devYuraKim]

Final: All states controlled by reducer function in App component

1. Removed internal state from the Options component.
2. Added answer state management in the App component.
3. Passed answer state as a prop to the Options component.

function Options({ question, dispatch, answer }) {
  const hasAnswered = answer !== null;

  return (
    <div className="options">
      {question.options.map((option, i) => (
        <button
          className={`btn btn-option ${i === answer ? "answer" : ""} ${
            hasAnswered
              ? i === question.correctOption
                ? "correct"
                : "wrong"
              : ""
          }`}
          key={I}
          disabled={hasAnswered}
          onClick={() => {
            dispatch({ type: "newAnswer", payload: i });
          }}
        >
          {option}
        </button>
      ))}
    </div>
  );
}

export default Options;