Deviopath › React

Poll with Percentages

Medium · Derived State

Build a poll with live results.

Show <h2>Favorite language?</h2> and one vote button per option in OPTIONS, like <button className="vote" data-option="Go">Go</button>. Every click adds one vote.

Show the results as <li data-option="..."> items in <ul className="results">, in the same order as OPTIONS, with text like "JavaScript: 2 votes (67%)":

- write "vote" for exactly 1 vote, otherwise "votes"

- the percentage is Math.round(votes / total * 100), or 0 when there are no votes yet

- the option with the most votes gets the class leader; when the top score is shared (or there are no votes) nobody is the leader

Also show <p className="total">Total votes: 3</p> and a "Reset" button that sets every count back to 0.

Next: Lifting State Up