Handling events in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

How do you attach a click event handler to a button in React?

Use the onClick attribute with a function, like <button onClick={handleClick}>Click me</button>. React uses camelCase for event names.

intermediate

Why do we often use arrow functions or bind methods when passing event handlers in React?

Because event handlers lose the correct this context if not bound. Arrow functions keep this from the surrounding scope, ensuring the handler works as expected.

beginner

What is the difference between onClick={handleClick()} and onClick={handleClick} in React?

onClick={handleClick} passes the function to be called on click. onClick={handleClick()} calls the function immediately during render, which is usually wrong.

beginner

How can you access the event object in a React event handler?

React passes the event object as the first argument to the handler function, e.g., <code>function handleClick(event) { /* use event here */ }</code>.

intermediate

What is synthetic event in React?

React wraps native browser events in a synthetic event to provide consistent behavior across browsers. It has the same interface as native events but works the same everywhere.

Which attribute is used to handle a click event in React?

A onClick

B onclick

C clickHandler

D handleClick

React uses camelCase event names like onClick.

What happens if you write onClick={handleClick()} instead of onClick={handleClick}?

A It causes a syntax error

B The function runs immediately during render

C The function runs only when clicked

D Nothing happens

Using parentheses calls the function immediately instead of passing it as a handler.

How do you access the event object in a React event handler?

A It is passed as the first argument to the handler function

B You must import it separately

C It is a global variable

D React does not provide an event object

React passes the event object as the first argument to event handlers.

Why use arrow functions for event handlers in React?

A To avoid syntax errors

B To make the code run faster

C To keep the correct this context

D Arrow functions are required by React

Arrow functions keep the surrounding this context, avoiding bugs.

What is a synthetic event in React?

A A fake event that does nothing

B A deprecated React feature

C An event only used in testing

D A wrapper around native events for cross-browser consistency

Synthetic events wrap native events to behave the same across browsers.

Explain how to add a click event handler to a button in React and why binding or arrow functions are important.

Think about how JavaScript functions handle 'this' inside React components.

Describe what a synthetic event is in React and why it is useful.

Consider how different browsers handle events differently.