* [ You Might Not Need an Effect  ](/learn/you-might-not-need-an-effect "You Might Not Need an Effect")
    * [ Lifecycle of Reactive Effects  ](/learn/lifecycle-of-reactive-effects "Lifecycle of Reactive Effects")
    * [ Separating Events from Effects  ](/learn/separating-events-from-effects "Separating Events from Effects")
    * [ Removing Effect Dependencies  ](/learn/removing-effect-dependencies "Removing Effect Dependencies")
    * [ Reusing Logic with Custom Hooks  ](/learn/reusing-logic-with-custom-hooks "Reusing Logic with Custom Hooks")

Is this page useful?

[ Learn React ](/learn)

[ Managing State ](/learn/managing-state)

#  Sharing State Between Components

Sometimes, you want the state of two components to always change together. To
do it, remove state from both of them, move it to their closest common parent,
and then pass it down to them via props. This is known as _lifting state up,_
and it’s one of the most common things you will do writing React code.

###  You will learn

  * How to share state between components by lifting it up 
  * What are controlled and uncontrolled components 

##  Lifting state up by example

In this example, a parent ` Accordion ` component renders two separate ` Panel
` s:

  * ` Accordion `
    * ` Panel `
    * ` Panel `

Each ` Panel ` component has a boolean ` isActive ` state that determines
whether its content is visible.

Press the Show button for both panels:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    function Panel({ title, children }) {
      const [isActive, setIsActive] = useState(false);
      return (
        <section className="panel">
          <h3>{title}</h3>
          {isActive ? (
            <p>{children}</p>
          ) : (
            <button onClick={() => setIsActive(true)}>
              Show
            </button>
          )}
        </section>
      );
    }
    
    export default function Accordion() {
      return (
        <>
          <h2>Almaty, Kazakhstan</h2>
          <Panel title="About">
            With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
          </Panel>
          <Panel title="Etymology">
            The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
          </Panel>
        </>
      );
    }
    
    

Show more

Notice how pressing one panel’s button does not affect the other panel—they
are independent.

![Diagram showing a tree of three components, one parent labeled Accordion and
two children labeled Panel. Both Panel components contain isActive with value
false.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fsharing_state_child.dark.png&w=1080&q=75)

![Diagram showing a tree of three components, one parent labeled Accordion and
two children labeled Panel. Both Panel components contain isActive with value
false.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fsharing_state_child.png&w=1080&q=75)

Initially, each ` Panel ` ’s ` isActive ` state is ` false ` , so they both
appear collapsed

![The same diagram as the previous, with the isActive of the first child Panel
component highlighted indicating a click with the isActive value set to true.
The second Panel component still contains value
false.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fsharing_state_child_clicked.dark.png&w=1080&q=75)

![The same diagram as the previous, with the isActive of the first child Panel
component highlighted indicating a click with the isActive value set to true.
The second Panel component still contains value
false.](/_next/