Add Details Tags Are A Controllable Component as a react til

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

@@ -0,0 +1,31 @@
+# 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.
+
+```jsx
+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](https://codesandbox.io/s/loving-merkle-hxlut?file=/src/App.js:0-545),
+[source](https://github.com/facebook/react/issues/15486)