Update Collapse.md

snippets/Collapse.md

@@ -2,38 +2,35 @@
 
 Renders a component with collapsible content.
 
-Use the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).
-Set the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context.
+Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
 Use an object, `style`, to hold the styles for individual components and their states.
-Create a method, `toggleCollapse` to change the component's `state` from collapsed to expanded and vice versa.
-In the `render()` method, use a `<div>` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.
-Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.
-Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.
+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`.
+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
-const style = {
-  collapsed: {
-    display: "none"
-  },
-  expanded: {
-    display: "block"
-  },
-  buttonStyle: {
-    display: "block",
-    width: "100%"
-  }
-};
-
 function Collapse(props) {
-  const [isCollapsed, setCollapsed] = useState(props.collapsed);
+  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);
 
-  const toggleCollapse = () => {
-    setCollapsed(!isCollapsed);
+  const style = {
+    collapsed: {
+      display: "none"
+    },
+    expanded: {
+      display: "block"
+    },
+    buttonStyle: {
+      display: "block",
+      width: "100%"
+    }
   };
 
   return (
     <div>
-      <button style={style.buttonStyle} onClick={() => toggleCollapse()}>
+      <button
+        style={style.buttonStyle}
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
         {isCollapsed ? "Show" : "Hide"} content
       </button>
       <div