Step 2: State and instant feedback

Now make it interactive. useState(null) remembers which option the learner picked. Once selected is not null the question is answered: the buttons are disabled, the correct one turns green and a wrong pick turns red. Notice the colours are computed during render from selected and question.answer, not stored separately.

Examplereact

const QUESTIONS = [
  { q: "Which hook stores a value that changes?", options: ["useState", "useRef", "useMemo"], answer: 0 },
  { q: "What does JSX compile to?", options: ["HTML strings", "React.createElement calls", "CSS"], answer: 1 },
  { q: "Which prop gives list items a stable identity?", options: ["id", "key", "name"], answer: 1 },
  { q: "Where should side effects like timers go?", options: ["useEffect", "the render body", "JSX"], answer: 0 },
];

const box = { display: "block", width: "100%", textAlign: "left", padding: 10, margin: "6px 0", border: "2px solid #8a90a0", borderRadius: 8, background: "#fff", cursor: "pointer", fontSize: 16 };

function App() {
  const [selected, setSelected] = useState(null);
  const question = QUESTIONS[0];
  const answered = selected !== null;

return (
    <div style={{ maxWidth: 420, fontFamily: "sans-serif" }}>
      <h2>Quiz</h2>
      <p>{question.q}</p>
      {question.options.map((o, i) => {
        let style = box;
        if (answered && i === question.answer) style = { ...box, borderColor: "#1b7f4c", background: "#e3f6ec" };
        else if (answered && i === selected) style = { ...box, borderColor: "#c62828", background: "#fdeaea" };
        return (
          <button key={o} style={style} disabled={answered} onClick={() => setSelected(i)}>
            {o}
          </button>
        );
      })}
      {answered && <p role="status">{selected === question.answer ? "Correct!" : "Not quite."}</p>}
    </div>
  );
}

Open in editor »

Click an answer. The message uses role="status" so screen readers announce "Correct!" or "Not quite." Also note that colour is not the only signal: the message says it in words, which matters for colour-blind users.

Quick check

Why are the green and red styles not stored in state?

They can be computed from the selected answer and the correct oneState cannot hold coloursCSS forbids it

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.