Step 4: A progress bar component

Extract a small reusable component. ProgressBar receives value and max as props, draws a bar whose width is the fraction complete, and uses role="progressbar" with aria-valuenow so assistive technology can read it. The result screen reuses it to show the score. The answers are also wrapped in a role="group" with a label.

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 ProgressBar({ value, max }) {
  return (
    <div role="progressbar" aria-valuemin={0} aria-valuemax={max} aria-valuenow={value} style={{ height: 8, background: "#e1e4ea", borderRadius: 4, margin: "8px 0" }}>
      <div style={{ width: (value / max) * 100 + "%", height: "100%", background: "#1b7f4c", borderRadius: 4, transition: "width .3s" }} />
    </div>
  );
}

function App() {
  const [index, setIndex] = useState(0);
  const [selected, setSelected] = useState(null);
  const [score, setScore] = useState(0);
  const finished = index >= QUESTIONS.length;

if (finished) {
    const pct = Math.round((score / QUESTIONS.length) * 100);
    return (
      <div style={{ fontFamily: "sans-serif" }}>
        <h2>Done! {pct}%</h2>
        <ProgressBar value={score} max={QUESTIONS.length} />
        <p>You scored {score} out of {QUESTIONS.length}.</p>
        <button onClick={() => { setIndex(0); setSelected(null); setScore(0); }}>Play again</button>
      </div>
    );
  }

const question = QUESTIONS[index];
  const answered = selected !== null;

return (
    <div style={{ maxWidth: 420, fontFamily: "sans-serif" }}>
      <ProgressBar value={index} max={QUESTIONS.length} />
      <p>Question {index + 1} of {QUESTIONS.length} · Score {score}</p>
      <h2>{question.q}</h2>
      <div role="group" aria-label="Answers">
        {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); if (i === question.answer) setScore(score + 1); }}>
              {i + 1}. {o}
            </button>
          );
        })}
      </div>
      {answered && <button onClick={() => { setIndex(index + 1); setSelected(null); }}>Next</button>}
    </div>
  );
}

Open in editor »

Components with clear props are the building block of React: ProgressBar knows nothing about quizzes, so it could be used for an upload or a course too.

Your turn: write the code

Write percent(value, max) that returns the whole-number percentage (rounded), or 0 when max is 0. Print percent(1, 4), percent(2, 3) and percent(5, 0).

Quick check

What are props?

Inputs a parent passes to a componentState inside a componentCSS classes

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.