onClick is the React event-handler property for responding to click events. Assign a callback expression to a JSX element or component, such as <button onClick={onClick}>Click me</button>. section 8.9 section 8.11
Use onClick to:
- Run a callback when a user clicks an element. section 8.11
- Receive an event object when the callback needs event details or must call methods such as preventDefault() or stopPropagation(). section 8.11
- Open interactive UI, such as setting menu state to expanded. section 8.8.3
Opening a menu
function Menu() { const [isExpanded, setExpanded] = useState(false); return ( <button onClick={() => setExpanded(true)}> Show menu </button> ); } The callback updates state when the button is clicked. A complete expandable menu can combine this React handler with a window pointer-down listener, then prevent clicks inside the menu from closing it.
React event handlers are assigned through JSX properties rather than addEventListener on the JSX element. Events can propagate through the element tree, and regular JavaScript listeners remain available for HTML nodes or event types that React does not expose. section 8.10 section 8.11
