0);

When the ` activeIndex ` is ` 0 ` , the first panel is active, and when it’s `
1 ` , it’s the second one.

Clicking the “Show” button in either ` Panel ` needs to change the active
index in ` Accordion ` . A ` Panel ` can’t set the ` activeIndex ` state
directly because it’s defined inside the ` Accordion ` . The ` Accordion `
component needs to _explicitly allow_ the ` Panel ` component to change its
state by [ passing an event handler down as a prop ](/learn/responding-to-
events#passing-event-handlers-as-props) :

    
    
    <>  
    
    
      <Panel  
    
    
        isActive={activeIndex === 0}  
    
    
        onShow={() => setActiveIndex(0)}  
    
    
      >  
    
    
        ...  
    
    
      </Panel>  
    
    
      <Panel  
    
    
        isActive={activeIndex === 1}  
    
    
        onShow={() => setActiveIndex(1)}  
    
    
      >  
    
    
        ...  
    
    
      </Panel>  
    
    
    </>

The ` <button> ` inside the ` Panel ` will now use the ` onShow ` prop as its
click event handler:

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() {
      const [activeIndex, setActiveIndex] = useState(0);
      return (
        <>
          <h2>Almaty, Kazakhstan</h2>
          <Panel
            title="About"
            isActive={activeIndex === 0}
            onShow={() => setActiveIndex(0)}
          >
            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={activeIndex === 1}
            onShow={() => setActiveIndex(1)}
          >
            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,
      onShow
    }) {
      return (
        <section className="panel">
          <h3>{title}</h3>
          {isActive ? (
            <p>{children}</p>
          ) : (
            <button onClick={onShow}>
              Show
            </button>
          )}
        </section>
      );
    }
    
    

Show more

This completes lifting state up! Moving state into the common parent component
allowed you to coordinate the two panels. Using the active index instead of
two “is shown” flags ensured that only one panel is active at a given time.
And passing down the event handler to the child allowed the child to change
the parent’s state.

![Diagram showing a tree of three components, one parent labeled Accordion and
two children labeled Panel. Accordion contains an activeIndex value of zero
which turns into isActive value of true passed to the first Panel, and
isActive value of false passed to the second
Panel.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fsharing_state_parent.dark.png&w=1080&q=75)

![Diagram showing a tree of three components, one parent labeled Accordion and
two children labeled Panel. Accordion contains an activeIndex value of zero
which turns into isActive value of true passed to the first Panel, and
isActive value of false passed to the second
Panel.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fsharing_state_parent.png&w=1080&q=75)

Initially, ` Accordion ` ’s ` activeIndex ` is ` 0 ` , so the first ` Panel `
receives ` isActive = true `

![The same diagram as the previous, with the activeIndex value of the parent
Accordion component highlighted indicating a click with the value changed to
one. The flow to both of the ch