diff --git a/README.md b/README.md index 665afff..afe6f94 100644 --- a/README.md +++ b/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) diff --git a/react/details-tags-are-a-controllable-component.md b/react/details-tags-are-a-controllable-component.md new file mode 100644 index 0000000..ba8035f --- /dev/null +++ b/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 `
` 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 ( +
{ + setOpen(prev => !prev); + onToggle(); + }} + > + {summary} + {children} +
+ ); +} +``` + +[live +example](https://codesandbox.io/s/loving-merkle-hxlut?file=/src/App.js:0-545), +[source](https://github.com/facebook/react/issues/15486)