details-tags-are-a-controllable-component.md

Details Tags Are A Controllable Component

HTML has a lovely, but little-used tag for summarizing a set of collapsed details. These details can be expanded and recollapsed by clicking the summary. This is the <details> tag and it can be controlled with the open prop and onToggle handler.

import React, { useState } from "react";

export default function Details({ summary, children, onToggle }) {
  const [open, setOpen] = useState(false);

  return (
    <details
      open={open}
      onToggle={() => {
        setOpen(prev => !prev);
        onToggle();
      }}
    >
      <summary>{summary}</summary>
      {children}
    </details>
  );
}

live example, source