Necessary Concepts to Build The Poll App With React

In this module, we’ll go through the essential React concepts that power our Poll App. Understanding these will help you clearly see how votes are recorded, how results update in real time, and how the UI stays in sync with the app’s state.

1) Components

React apps are built from small, reusable pieces called components.

In our Poll App, everything happens inside the main App component:

• The App function defines both the UI (poll question, options, results) and the behavior (how voting works, how percentages are calculated).
• As the project grows, we could split it into smaller components like:
  • PollQuestion (for displaying the question)
  • PollOptions (for the clickable voting options)
  • PollResults (for showing vote counts and percentages)

For now, we kept it in one component so it’s beginner-friendly and easy to follow.

2) State and Hooks

State is how React apps “remember” data between renders. We used the useState hook to keep track of poll votes.

Example from our code:

const [votes, setVotes] = useState([0, 0, 0, 0]);

• votes → an array that stores the number of votes for each option.
  Example: [2, 5, 1, 0] means option 2 has 5 votes.
• setVotes → a function used to update votes.

Whenever setVotes is called, React automatically re-renders the UI so the updated results show instantly.

3) Event Handling

Event handling lets the app respond to user actions like button clicks.

In our Poll App, clicking an option button increases that option’s vote count:

const handleVote = (index) => {

const newVotes = [...votes];

newVotes[index] += 1;

setVotes(newVotes);

};

• handleVote takes the index of the option clicked (0 for first option, 1 for second, etc.).
• A copy of the votes array is made with ...votes.
• The selected option’s count is increased by 1.
• setVotes(newVotes) updates the state and triggers a re-render.

This is why the results appear immediately after clicking.

4) Controlled Inputs (Buttons)

In some apps, we deal with text inputs. Here, we deal with buttons for poll options. Each button’s behavior is controlled by React’s state and event handlers.

Example:

{options.map((option, index) => (

<button key={index} onClick={() => handleVote(index)}>

{option}

</button>

))}

• The text inside each button ({option}) comes from our options array.
• The onClick event passes the correct index to handleVote.
• This keeps the buttons fully controlled by React.

5) Arrays and Mapping

The map() function lets us loop over arrays and render multiple items dynamically. We used this for both poll options and results.

For options:

options.map((option, index) => (

<button key={index} onClick={() => handleVote(index)}>

{option}

</button>

))

For results:

votes.map((count, index) => (

<p key={index}>

{options[index]}: {count} votes

</p>

))

This means no matter how many options we add, the app will automatically generate the right number of buttons and results.

6) Conditional Rendering

Sometimes we want to show certain things only if a condition is true.

In our Poll App, we only display the results section when at least one vote has been cast:

{totalVotes > 0 && (

<div className="results"> ... </div>

)}

This way:

• Before voting, users only see the question and options.
• After voting, the results appear below the poll.

7) Percentage Calculation Logic

The most important feature of our Poll App is showing percentages for each option.

We calculate percentages like this:

const totalVotes = votes.reduce((a, b) => a + b, 0);

const percentage = ((count / totalVotes) * 100).toFixed(1);

• reduce() adds up all votes to get the total.
• For each option, we divide its count by total votes and multiply by 100.
• toFixed(1) rounds the percentage to one decimal place.

This makes the results fair and dynamic, no matter how many people vote.

8) Styling and Dynamic Bars

We also styled progress bars to visually represent the percentages.

Example:

<div className="bar" style={{ width: `${percentage}%` }}></div>

• The width of the bar is set dynamically based on the percentage.
• If an option has 50% votes, the bar will stretch halfway across.
• This makes the app visually engaging and easy to understand.