Which is an example of a JSX callback function usage?

Which is an example of a JSX callback function usage?

• A. ReactDOM.render(greeting, onClick={someCallbackFunc});
• B. ReactDOM.render(greeting, onClick=someCallbackFunc);
• C. ReactDOM.render(greeting, someCallbackFunc);
• D. ReactDOM.render(greeting, {onClick: someCallbackFunc});

Answer: (A)

In JSX, you wire up a callback by passing a function as the value of an event prop using curly braces. onClick={someCallbackFunc} means someCallbackFunc is given as the handler to run when the click event occurs. The curly braces tell React to evaluate the JavaScript expression and pass the function itself, not a string or the result of calling it. This is the correct pattern because it preserves the function as a reference and defers invocation until the event triggers. Other forms don’t fit the JSX pattern. onClick=someCallbackFunc isn’t valid JSX syntax for passing a function reference, since JSX requires curly braces to embed expressions. Providing the callback as a separate argument to the render call (as the second parameter) or passing an object literal as the second argument doesn’t attach an event handler to the rendered element. A typical, working usage in real code would look like ReactDOM.render(<Greeting onClick={someCallbackFunc} />, document.getElementById('root')).

In JSX, you wire up a callback by passing a function as the value of an event prop using curly braces. onClick={someCallbackFunc} means someCallbackFunc is given as the handler to run when the click event occurs. The curly braces tell React to evaluate the JavaScript expression and pass the function itself, not a string or the result of calling it. This is the correct pattern because it preserves the function as a reference and defers invocation until the event triggers.

Other forms don’t fit the JSX pattern. onClick=someCallbackFunc isn’t valid JSX syntax for passing a function reference, since JSX requires curly braces to embed expressions. Providing the callback as a separate argument to the render call (as the second parameter) or passing an object literal as the second argument doesn’t attach an event handler to the rendered element. A typical, working usage in real code would look like ReactDOM.render(, document.getElementById('root')).