React Event Handling: Passing Parameters

Create a Parameterized Click Handler

Build a React component with multiple buttons that pass different IDs to a single click handler using arrow functions.

Expected output: Clicking each button shows an alert with the correct button ID.

Hint: Use inline arrow functions in the onClick attribute to pass the ID.

Refactor Class Component Event Handlers

Convert a class component's event handlers to use bind in the constructor instead of inline bind calls.

Expected output: Event handlers work correctly without inline bind calls in render.

Hint: Bind the handler once in the constructor with preset parameters if needed.

You can pass parameters by using inline arrow functions or by binding the handler with preset arguments using the bind method.

Arrow functions are concise and commonly used in functional components, but can create new functions on each render. Bind can be used in class components to preset parameters and avoid creating new functions repeatedly.

Creating new functions inside render can cause unnecessary re-renders and performance degradation, especially in large lists or complex components.