Update Collapse

snippets/Collapse.md

@@ -5,15 +5,15 @@ tags: components,children,state,intermediate
 
 Renders a component with collapsible content.
 
-- Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
+- Use the `React.useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`.
 - Use an object, `style`, to hold the styles for individual components and their states.
-- Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.
+- Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `children`.
 - Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
 - Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
 
 ```jsx
-function Collapse(props) {
+const Collapse = ({ collapsed, children }) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
 
   const style = {
     collapsed: {
@@ -38,11 +38,11 @@ function Collapse(props) {
         style={isCollapsed ? style.collapsed : style.expanded}
         aria-expanded={isCollapsed}
       >
-        {props.children}
+        {children}
       </div>
     </div>
   );
-}
+};
 ```
 
 ```jsx