React Accordion

accordion.js

class Accordion extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: null,
    }
  }
  toggle = (event, index) => this.setState(state => ({ activeItem: state.activeItem === index ? null : index }))
  render() {
    return (
      <div>
        {React.Children.map(this.props.children, child => {
          return React.cloneElement(child, { toggle: this.toggle })
        })}
      </div>
    )
  }
}

const AccordionItem = ({ label, children, toggle }) => (
  <div>
    <button onClick={toggle}>{label}</button>
    {children}
  </div>
)

const Footer = props => (
  <Accordion>
    <AccordionItem label="A">Foo</AccordionItem>
    <AccordionItem label="B">Bar</AccordionItem>
  </Accordion>
)