Build a Poll / Voting widget

Question

Accepted Answer

## Building a Poll / Voting Widget in React

**Mental model:** A poll is a list of options with vote counts plus a record of *this user's* vote. Voting increments the chosen option (and decrements the previous if they switch). Percentages are derived from the counts; results only reveal after voting.

### Step 1 — Counts + the user's choice
```jsx
const [votes, setVotes] = useState(options.map((o) => o.votes));
const [choice, setChoice] = useState(null);
```

### Step 2 — Vote (with switch support)
Move the vote if they pick a different option.

```jsx
const vote = (i) => {
  setVotes((v) => {
    const next = v.slice();
    if (choice != null) next[choice] -= 1;
    next[i] += 1;
    return next;
  });
  setChoice(i);
};
```

### Step 3 — Derive total + percentages
```jsx
const total = votes.reduce((a, b) => a + b, 0);
const pct = (n) => (total === 0 ? 0 : Math.round((n / total) * 100));
```

### Step 4 — Reveal results after voting
Show bars + percentages only once `choice != null`.

Build a Poll / Voting widget

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)