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, id }) => (
 <div style={styles} data-id={id}>
   {children}
 </div>
)

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

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

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

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

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

import React from 'react'

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

export default Accordion

DZuz14

<Accordion>
 <Accordion.Item>
   …content here
 </Accordion.Item>
</Accordion>

DZuz14

import React from 'react'

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

Accordion.Item = ({ children }) => children

export default Accordion

DZuz14

return (
 <Accordion>
  <Accordion.Collapsed>
    …content here
  </Accordion.Collapsed>
  <Accordion.Expanded>
    …content here
  </Accordion.Expanded>
 </Accordion>
)