image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fsharing_state_child_clicked.png&w=1080&q=75)

Clicking either ` Panel ` ’s button will only update that ` Panel ` ’s `
isActive ` state alone

**But now let’s say you want to change it so that only one panel is expanded
at any given time.** With that design, expanding the second panel should
collapse the first one. How would you do that?

To coordinate these two panels, you need to “lift their state up” to a parent
component in three steps:

  1. **Remove** state from the child components. 
  2. **Pass** hardcoded data from the common parent. 
  3. **Add** state to the common parent and pass it down together with the event handlers. 

This will allow the ` Accordion ` component to coordinate both ` Panel ` s and
only expand one at a time.

###  Step 1: Remove state from the child components

You will give control of the ` Panel ` ’s ` isActive ` to its parent
component. This means that the parent component will pass ` isActive ` to `
Panel ` as a prop instead. Start by **removing this line** from the ` Panel `
component:

    
    
    const [isActive, setIsActive] = useState(false);

And instead, add ` isActive ` to the ` Panel ` ’s list of props:

    
    
    function Panel({ title, children, isActive }) {

Now the ` Panel ` ’s parent component can _control_ ` isActive ` by [ passing
it down as a prop. ](/learn/passing-props-to-a-component) Conversely, the `
Panel ` component now has _no control_ over the value of ` isActive ` —it’s
now up to the parent component!

###  Step 2: Pass hardcoded data from the common parent

To lift state up, you must locate the closest common parent component of
_both_ of the child components that you want to coordinate:

  * ` Accordion ` _(closest common parent)_
    * ` Panel `
    * ` Panel `

In this example, it’s the ` Accordion ` component. Since it’s above both
panels and can control their props, it will become the “source of truth” for
which panel is currently active. Make the ` Accordion ` component pass a
hardcoded value of ` isActive ` (for example, ` true ` ) to 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';
    
    export default function Accordion() {
      return (
        <>
          <h2>Almaty, Kazakhstan</h2>
          <Panel title="About" isActive={true}>
            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" isActive={true}>
            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>
        </>
      );
    }
    
    function Panel({ title, children, isActive }) {
      return (
        <section className="panel">
          <h3>{title}</h3>
          {isActive ? (
            <p>{children}</p>
          ) : (
            <button onClick={() => setIsActive(true)}>
              Show
            </button>
          )}
        </section>
      );
    }
    
    

Show more

Try editing the hardcoded ` isActive ` values in the ` Accordion ` component
and see the result on the screen.

###  Step 3: Add state to the common parent

Lifting state up often changes the nature of what you’re storing as state.

In this case, only one panel should be active at a time. This means that the `
Accordion ` common parent component needs to keep track of _which_ panel is
the active one. Instead of a ` boolean ` value, it could use a number as the
index of the active ` Panel ` for the state variable:

    
    
    const [activeIndex, setActiveIndex] = useState(