DZuz14

import React from 'react'
import Collapsed from './Collapsed'
import Expanded from './Expanded'

const Accordion = ({ children }) => {
 return <div>{children}</div>
}

Accordion.Collapsed = Collapsed
Accordion.Expanded = Expanded

DZuz14

const items = [
  {
    summary: 'Basketball shoes',
    detail: 'Never worn, but owned by the GOAT, Michael Jordan himself.'
  },
  {
    summary: 'Tennis racket',
    detail: 'Not in too bad of shape.'
  },
  {

DZuz14

<Accordion>
  {items.map(({ summary, detail }) => (
    <Accordion.Item key={summary}>
      <Accordion.Collapsed>{summary}</Accordion.Collapsed>
      <Accordion.Expanded>{detail}</Accordion.Expanded>
    </Accordion.Item>
  ))}
</Accordion>

DZuz14

<Accordion>
  {items.map(({ summary, detail }) => (
    <Accordion.Item key={summary}>
      <Accordion.Collapsed id={summary}>
       {summary}
      </Accordion.Collapsed>
      <Accordion.Expanded>{detail}</Accordion.Expanded>
    </Accordion.Item>
  ))}
</Accordion>

DZuz14

import React from 'react'

const Collapsed = ({ children, id }) => (
 <div style={styles} data-id={id}>
   {children}
 </div>
)

const styles = {
 color: '#007bff', // blue

DZuz14

import React, { useState } from 'react'
import Collapsed from './Collapsed'
import Expanded from './Expanded'

const Accordion = ({ children }) => {
  const [open, setOpen] = useState('')
  
  const handleOpen = (e) => {
    const id = e.target.getAttribute('data-id')
    id === open ? setOpen('') : setOpen(id)

DZuz14

import React from 'react'

const Collapsed = ({ children, handleOpen, id }) => (
 <div style={styles} onClick={handleOpen} data-id={id}>
   {children}
 </div>
)

const styles = {
 color: '#007bff', // blue

DZuz14

const Accordion = ({ children }) => {
//   const [open, setOpen] = useState('')
  
//   const handleOpen = (e) => {
//     const id = e.target.getAttribute('data-id')
//     id === open ? setOpen('') : setOpen(id)
//   }
  
  return (
      <div>

DZuz14

 {React.Children.map(children, child => {
    const id = child.props.children[0].props.id

    const collapsed = React.cloneElement(child.props.children[0], {
      handleOpen
    })

    const expanded = child.props.children[1]

    return (

DZuz14

import React, { useState } from 'react'
import Collapsed from './Collapsed'
import Expanded from './Expanded'

/**
 * @function Accordion
 */
const Accordion = ({ children, initial }) => {
  const [open, setOpen] = useState(initial)