Search⌘ K
AI Features

Using the Controlled Component

Explore how to implement controlled components in React using hooks to manage component state and user interactions. Understand sending control props like shouldExpand and handling events with callbacks to maintain a single active element. This lesson helps you create predictable, interactive components using the controlled component pattern and custom hooks.

Sending a Prop

We reach out to the user and let them know that we have implemented a pattern to cater for their specific use case.

Out of excitement, they get on to implement the change.

Here’s how.

Within the user app, they send a data-index prop to every Header element:

Javascript (babel-node)
// before
<Expandable.Header />
// now
<Expandable.Header data-index={index} />

The index is ...