When you work on a React function component you might have the need to attach an event to onClick (or other events).

You usually do:

<button onClick={addBill}>Add</button>

But what if you have to pass a parameter? Say you have a list of bills, and you want to remove one by clicking the “X” next to it.

You can’t do:

<button onClick={removeBill(index)}>𝗫</button>

because the expression inside onClick is going to be executed on mount. This is going to delete all the bills in the list, as soon as the app is started.

Instead, this is what you need to do, using arrow functions:

<button onClick={() => removeBill(index)}>𝗫</button>

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	The React Fragment
19:	React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	▶︎ How to pass a parameter to event handlers in React