Allowing the internal state to be controlled
In this section, we’ll learn how to allow consumers of a component to control its internal state. We will use this pattern in the checklist component so that users can check just a single item.
Understanding how the internal state can be controlled
Allowing consumers of a component to control the state allows the behavior of a component to be tweaked if that behavior is driven by the state. Let’s go through an example using the useToggle custom hook we covered in the last section when learning about custom hooks.
Two additional props are required to allow the internal state to be controlled – one for the current state value and one for a change handler. These additional props are toggleValue and onToggleValueChange in useToggle:
type Params = {
defaultToggleValue?: boolean;
toggleValue?: boolean;
onToggleValueChange?: (toggleValue: boolean) => void;
};
export function...
