Add Details Tags Are A Controllable Component as a react til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_910 TILs and counting..._
+_911 TILs and counting..._
 
 ---
 
@@ -607,6 +607,7 @@ _910 TILs and counting..._
 - [Debug Jest Tests In create-react-app](react/debug-jest-tests-in-create-react-app.md)
 - [Defining State In A Simple Class Component](react/defining-state-in-a-simple-class-component.md)
 - [Destructure Variables As Props To A Component](react/destructure-variables-as-props-to-a-component.md)
+- [Details Tags Are A Controllable Component](react/details-tags-are-a-controllable-component.md)
 - [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md)
 - [Dynamically Add Props To A Child Component](react/dynamically-add-props-to-a-child-component.md)
 - [Dynamically Create HTML Elements](react/dynamically-create-html-elements.md)

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)