How to Control a Child Component from Its Parent in React

To control a child component in React, the parent owns the child's important data and passes it back down as props. The child becomes controlled: it renders the values the parent gives it and calls handler functions to request changes. This is the same idea behind controlled form inputs, applied to any component.

Controlled and uncontrolled

A component that keeps its own state is uncontrolled. A component driven entirely by props is controlled. The difference is who owns the value.

App.jsx

import { useState } from "react";
 
function Switch() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? "On" : "Off"}</button>;
}

This Switch manages itself. Its parent cannot read or change the on value, which is fine for an isolated component but makes coordination impossible.

Controlled components flip the ownership. The value moves to the parent, and the child becomes a rendering and reporting device.

Give the parent control

To control the Switch, move the on value to the parent and pass it back as a prop. The child also receives a handler to call when it wants a change:

App.jsx

function Switch({ on, onToggle }) {
  return <button onClick={onToggle}>{on ? "On" : "Off"}</button>;
}

The child no longer owns the value. It renders the on prop and calls onToggle on click, leaving every decision to the parent. The on plus verb naming, like onToggle or onChange, signals that the child reports a change rather than deciding it.

The parent owns the state

The parent holds the value and decides what a toggle does:

App.jsx

function App() {
  const [on, setOn] = useState(false);
  return <Switch on={on} onToggle={() => setOn(!on)} />;
}

Clicking the button flips the parent's state, and the Switch re-renders with the new label. The parent can now read on anywhere, disable the switch, or sync it with another component. Control is what makes coordination possible.

Control what matters, keep the rest local

A real component usually mixes both styles. A Select might own its open state while the selected value stays controlled by the parent. The parent controls the data that affects the rest of the app, and the child keeps the purely visual details.

This split keeps parents focused on the important values without forcing them to configure every detail. Most design systems follow it: a few controlled props plus internal state for open and hover.

When to control a child

Control a child when the parent needs to know or coordinate the value.

• The parent must read the value elsewhere: control it.
• Two children must stay in sync: control them from the parent.
• The value is used only inside the child: leave it local.

Controlled components are more flexible but need more parent code. Start uncontrolled and lift state when coordination appears. The lifting state guide walks through the full refactor.

What to learn next

Review passing props for the mechanics of value and handler props, then apply the pattern to real forms and inputs.