An onClick event is a React event-handler property that responds when a user clicks a component or DOM element. It can pass the click result to a parent callback. section 8.7
Wire an onClick event through a component hierarchy:
- Assign the parent callback to the child component’s onClick property. section 8.7
- Pass the clicked button’s identifier to the parent handler. section 8.7
- Update state only when the received identifier differs from the active filter. section 8.7
Filtering a rankings visualization
A filter button receives onClick={props.onFilterSelection}. The parent supplies filterSelectionHandler, which receives the clicked ID and calls setActiveFilter(id). Clicking a button then updates the rankings visualization. section 8.7
<Button
key={filter.id}
id={filter.id}
label={filter.label}
isActive={props.activeFilter === filter.id ? true : false}
onClick={props.onFilterSelection}
/>
Inspect the complete Button usage, including the active state and callback passed through onClick. section 8.7
