Explore React

Sharing state

DEMO

Parent Component

Child Component

You can share state between sibilings by creating the state inside the parent to begin with, then pass the state to the children so they can both access it.

SharingState.jsx

CounterChild.jsx

PrismsChild.jsx

function SharingState() {
  const [count, setCount] = React.useState(0);
  return (
    <Parent>
      <CounterChild count={count} setCount={setCount} />
      <PrismsChild count={count} />
    </Parent>
  );
}

Note: Code snippets do not include styling details unless they are the focus of the exercise.