A button starts an action when clicked. In React, a reusable Button component can wrap an HTML `<button>`, supplying consistent styling while its caller chooses the label and action. section 8.6
Two actions, one component
A counter can render `<Button label="Increment" handleClick={() => update(1)} />` and a second Button that calls `update(-1)`. Inside Button, `<button onClick={handleClick}>{label}</button>` connects each click to its action. This direct connection also passes the click event to `handleClick`. If callers should receive no event, use `onClick={() => handleClick()}` instead. section 8.6
Placement matters: a button inside a form submits that form by default. A submission can reload the page, even when the form has no inputs. Use that behavior for an intended form submission; otherwise, account for the default action. section 8.4.1 section 12.1.1
An icon button for a timer
A timer’s Button accepts `icon` and `label`, renders an image inside `<button title={label}>`, and forwards extra properties to the HTML button. Its parent changes the icon, label, and click handler according to whether the timer is running, displaying play or pause as appropriate. section 12.2.2 section 12.2.4
The same pattern extends to task controls: buttons edit or delete a task, while an icon button submits the add-task form. A separate menu example switches between Log In and Log Out buttons and conditionally shows a profile link; that trust-based switch is only a demonstration, not real authentication. section 13.2.4 section 11.5
Listing 12.5 src/Button.js in the simple timer
function Button({ icon, label, ...rest }) { #1
return (
<button title={label} className="toggle" {...rest}> #2
<img src={`/icons/${icon}.svg`} alt={label} />
</button>
);
}
export default Button;
See how the timer’s reusable component puts a label and icon on an HTML button and forwards remaining properties. section 12.2.4
