In React, how is onClick typically attached to a component instance in JSX?

In React, how is onClick typically attached to a component instance in JSX?

• A. By adding an event listener directly in the DOM inside render.
• B. As a prop named onClick.
• C. By copying the handler into the component's state.
• D. As a lifecycle method named onClick.

Answer: (B)

In React, you wire up user interactions by passing a function to the onClick prop of the JSX element. This is the standard pattern: you provide a handler function and React calls it when the element is clicked. For example: <button onClick={handleClick}>Click me</button>. The function you supply can be defined in your component and may be bound to the right context in class components (often using an arrow function or binding in the constructor); in functional components you just define the function and pass it directly. React uses its synthetic event system to manage these events, so you don’t attach real DOM listeners inside render. Also, event handlers aren’t stored in state, since state is for data, not behavior. And onClick isn’t a lifecycle method — React lifecycle hooks are things like componentDidMount or useEffect, not event names attached to elements. So the best approach is attaching the handler as a prop named onClick on the JSX element.

In React, you wire up user interactions by passing a function to the onClick prop of the JSX element. This is the standard pattern: you provide a handler function and React calls it when the element is clicked. For example: Click me. The function you supply can be defined in your component and may be bound to the right context in class components (often using an arrow function or binding in the constructor); in functional components you just define the function and pass it directly.

React uses its synthetic event system to manage these events, so you don’t attach real DOM listeners inside render. Also, event handlers aren’t stored in state, since state is for data, not behavior. And onClick isn’t a lifecycle method — React lifecycle hooks are things like componentDidMount or useEffect, not event names attached to elements.

So the best approach is attaching the handler as a prop named onClick on the JSX element.