React-Hooks-Article: Expansion Box implemented as Function with useState Hook

ExpansionBoxFunction.tsx

import React, { FC, useState } from "react"
import "./expansion-box.css"

type Props = {
  title: string
}

export const ExpansionBoxFunction: FC<Props> = (props) => {
  const [expanded, setExpanded] = useState(false)

  const switchExpansion = () => {
    setExpanded(!expanded)
  }

  return (
    <div className={`expansion-box ${expanded ? "expanded" : ""}`}>
      <header>
        <h1>{props.title}</h1>
        <button onClick={switchExpansion}>{expanded ? <span>&#x25B2;</span> : <span>&#x25BC;</span>}</button>
      </header>

      {expanded && <section>{props.children}</section>}
    </div>
  )
}