React-Hooks-Article: Expansion Box implemented as Class

ExpansionBoxClass.tsx

import React from "react"
import "./expansion-box.css"

type Props = {
  title: string
}

type State = {
  expanded: boolean
}

export class ExpansionBoxClass extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      expanded: false,
    }
  }

  private switchExpansion() {
    this.setState((prevState) => ({ expanded: !prevState.expanded }))
  }

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

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