From 0eeac148c67ffd8f32a0c5437bc9bb7da71e9c6e Mon Sep 17 00:00:00 2001
From: komv8i <phani.komaravolu@cchmc.org>
Date: Thu, 7 Feb 2019 14:23:46 -0500
Subject: [PATCH 1/2] change collapse component to hooks implementation

---
 snippets/Collapse.md | 72 ++++++++++++++++++++------------------------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 4da570282..2cf9a25a7 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -5,52 +5,46 @@ 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 an object, `style`, to hold the styles for individual components and their states.
-Create a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
+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.
 
 ```jsx
-class Collapse extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      collapsed: !!props.collapsed
-    };
-    this.style = {
-      collapsed: {
-        display: 'none'
-      },
-      expanded: {
-        display: 'block'
-      },
-      buttonStyle: {
-        display: 'block',
-        width: '100%'
-      }
-    };
-    this.toggleCollapse = this.toggleCollapse.bind(this);
+const style = {
+  collapsed: {
+    display: "none"
+  },
+  expanded: {
+    display: "block"
+  },
+  buttonStyle: {
+    display: "block",
+    width: "100%"
   }
-  
-  toggleCollapse() {
-    this.setState(state => ({ collapsed: !state.collapsed }));
-  }
-  
-  render() {
-    return (
-      <div>
-        <button style={this.style.buttonStyle} onClick={this.toggleCollapse}>
-          {this.state.collapsed ? 'Show' : 'Hide'} content
-        </button>
-        <div 
-          style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} 
-          aria-expanded = {this.state.collapsed}
-        >
-          {this.props.children}
-        </div>
+};
+
+function Collapse(props) {
+  const [isCollapsed, setCollapsed] = useState(props.collapsed);
+
+  const toggleCollapse = () => {
+    setCollapsed(!isCollapsed);
+  };
+
+  return (
+    <div>
+      <button style={style.buttonStyle} onClick={() => toggleCollapse()}>
+        {isCollapsed ? "Show" : "Hide"} content
+      </button>
+      <div
+        className="collapse-content"
+        style={isCollapsed ? style.collapsed : style.expanded}
+        aria-expanded={isCollapsed}
+      >
+        {props.children}
       </div>
-    );
-  }
+    </div>
+  );
 }
 ```
 

From 6831b872a2c292ec1d8a8465ba890501f4bec3ba Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 12 Feb 2019 20:24:50 +0200
Subject: [PATCH 2/2] Update Collapse.md

---
 snippets/Collapse.md | 43 ++++++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 2cf9a25a7..04dd27182 100644
--- a/snippets/Collapse.md
+++ b/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