diff --git a/README.md b/README.md
index 2b71ac8be..39e3adc24 100644
--- a/README.md
+++ b/README.md
@@ -243,41 +243,36 @@ ReactDOM.render(
 
 Renders a textarea component with a character limit.
 
-Use the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.
-Create a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.
-In the`render()` method, use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to the `handleChange` method.
+Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
+Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.
+Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
+Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 
 ```jsx
-class LimitedTextarea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      content: props.value,
-      characterCount: props.value.length,
-      limit: props.limit
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-  
-  handleChange(event) {
-    let newContent = event.target.value;
-    if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);
-    this.setState(state => ({ content: newContent, characterCount: newContent.length }));
-  }
-  render() {
-    return (
-      <div>
-        <textarea 
-          rows={this.props.rows} 
-          cols={this.props.cols} 
-          onChange={this.handleChange} 
-          value={this.state.content}
-        >
-        </textarea>
-        <p>{this.state.characterCount}/{this.props.limit}</p>
-      </div>
-    );
-  }
+function LimitedTextarea({ rows, cols, value, limit }) {
+  const [content, setContent] = React.useState(value);
+
+  const setFormattedContent = text => {
+    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
+  };
+
+  React.useEffect(() => {
+    setFormattedContent(content);
+  }, []);
+
+  return (
+    <div>
+      <textarea
+        rows={rows}
+        cols={cols}
+        onChange={event => setFormattedContent(event.target.value)}
+        value={content}
+      />
+      <p>
+        {content.length}/{limit}
+      </p>
+    </div>
+  );
 }
 ```
 
@@ -298,36 +293,23 @@ ReactDOM.render(
 
 Renders a password input field with a reveal button.
 
-Initially set `state.shown` to `false` to ensure that the password is not shown by default.
-Create a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.
-In the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field.
-Finally, bind the `<button>`'s `onClick` event to the `toggleShown` method.
+Use the `React.useState()` hook to create the `shown` state vairable and set its value to `false`.
+Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
 
 ```jsx
-class PasswordRevealer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      shown: false
-    };
-    this.toggleShown = this.toggleShown.bind(this);
-  }
+function PasswordRevealer({ value }) {
+  const [shown, setShown] = React.useState(false);
 
-  toggleShown() {
-    this.setState(state => ({ shown: !state.shown }));
-  }
-
-  render() {
-    return (
-      <div>
-        <input
-          type={this.state.shown ? 'text' : 'password'}
-          value={this.props.value}
-        />
-        <button onClick={this.toggleShown}>Show/Hide</button>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <input
+        type={shown ? "text" : "password"}
+        value={value}
+        onChange={() => {}}
+      />
+      <button onClick={() => setShown(!shown)}>Show/Hide</button>
+    </div>
+  );
 }
 ```
 
@@ -423,13 +405,12 @@ ReactDOM.render(
 
 Renders a tree view of a JSON object or array with collapsible content.
 
-Use `defaultProps` to set the default values of certain props.
+Use object destructuring to set defaults for certain props. 
 Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
-Set the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.
-Create a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
-In the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `state`.
-Determine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. 
-For each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.
+Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
+Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
+Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`. 
+For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
 Otherwise, render a `<p>` element with the appropriate style.
 
 ```css
@@ -469,76 +450,53 @@ div.tree-element:before {
 ```
 
 ```jsx
-class TreeView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      toggled: props.toggled
-    };
-    this.toggle = this.toggle.bind(this);
-  }
+function TreeView({
+  data,
+  toggled = true,
+  name = null,
+  isLast = true,
+  isChildElement = false,
+  isParentToggled = true
+}) {
+  const [isToggled, setIsToggled] = React.useState(toggled);
 
-  toggle() {
-    this.setState(state => ({ toggled: !state.toggled }));
-  }
-
-  render() {
-    return (
-      <div
-        style={{ marginLeft: this.props.isChildElement ? 16 : 4 + "px" }}
-        className={
-          this.props.isParentToggled ? "tree-element" : "tree-element collapsed"
-        }
-      >
-        <span
-          className={this.state.toggled ? "toggler" : "toggler closed"}
-          onClick={this.toggle}
-        />
-        {this.props.name ? (
-          <strong>&nbsp;&nbsp;{this.props.name}: </strong>
-        ) : (
-          <span>&nbsp;&nbsp;</span>
-        )}
-        {Array.isArray(this.props.data) ? "[" : "{"}
-        {!this.state.toggled && "..."}
-        {Object.keys(this.props.data).map(
-          (v, i, a) =>
-            typeof this.props.data[v] == "object" ? (
-              <TreeView
-                data={this.props.data[v]}
-                isLast={i === a.length - 1}
-                name={Array.isArray(this.props.data) ? null : v}
-                isChildElement
-                isParentToggled={
-                  this.props.isParentToggled && this.state.toggled
-                }
-              />
-            ) : (
-              <p
-                style={{ marginLeft: 16 + "px" }}
-                className={
-                  this.state.toggled ? "tree-element" : "tree-element collapsed"
-                }
-              >
-                {Array.isArray(this.props.data) ? "" : <strong>{v}: </strong>}
-                {this.props.data[v]}
-                {i === a.length - 1 ? "" : ","}
-              </p>
-            )
-        )}
-        {Array.isArray(this.props.data) ? "]" : "}"}
-        {!this.props.isLast ? "," : ""}
-      </div>
-    );
-  }
-}
-
-TreeView.defaultProps = {
-  isLast: true,
-  toggled: true,
-  name: null,
-  isChildElement: false,
-  isParentToggled: true
+  return (
+    <div
+      style={{ marginLeft: isChildElement ? 16 : 4 + "px" }}
+      className={isParentToggled ? "tree-element" : "tree-element collapsed"}
+    >
+      <span
+        className={isToggled ? "toggler" : "toggler closed"}
+        onClick={() => setIsToggled(!isToggled)}
+      />
+      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
+      {Array.isArray(data) ? "[" : "{"}
+      {!isToggled && "..."}
+      {Object.keys(data).map(
+        (v, i, a) =>
+          typeof data[v] == "object" ? (
+            <TreeView
+              data={data[v]}
+              isLast={i === a.length - 1}
+              name={Array.isArray(data) ? null : v}
+              isChildElement
+              isParentToggled={isParentToggled && isToggled}
+            />
+          ) : (
+            <p
+              style={{ marginLeft: 16 + "px" }}
+              className={isToggled ? "tree-element" : "tree-element collapsed"}
+            >
+              {Array.isArray(data) ? "" : <strong>{v}: </strong>}
+              {data[v]}
+              {i === a.length - 1 ? "" : ","}
+            </p>
+          )
+      )}
+      {Array.isArray(data) ? "]" : "}"}
+      {!isLast ? "," : ""}
+    </div>
+  );
 }
 ```
 
@@ -623,70 +581,49 @@ ReactDOM.render(
 
 Renders a carousel component.
 
-Initially set `state.active` to `0` (index of the first item).
+Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
 Use an object, `style`, to hold the styles for the individual components.
-Define a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
-Define another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
-first renders (on `ComponentDidMount`).
-In the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
-Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
-`props` along with the computed styles.
+Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
+Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
+Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
 
 ```jsx
-class Carousel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      active: 0
-    };
-    this.scrollInterval = null;
-    this.style = {
-      carousel: {
-        position: "relative"
-      },
-      carouselItem: {
-        position: "absolute",
-        visibility: "hidden"
-      },
-      visible: {
-        visibility: "visible"
-      }
-    };
-  }
-  componentDidMount() {
-    this.changeItem();
-  }
-  setActiveItem = () => {
-    const { carouselItems } = this.props;
-    this.setState(
-      prevState => ({
-        active: (prevState.active + 1) % carouselItems.length
-      }),
-      this.changeItem
-    );
+function Carousel(props) {
+  const [active, setActive] = React.useState(0);
+  let scrollInterval = null;
+  const style = {
+    carousel: {
+      position: "relative"
+    },
+    carouselItem: {
+      position: "absolute",
+      visibility: "hidden"
+    },
+    visible: {
+      visibility: "visible"
+    }
   };
-  changeItem = () => {
-    this.scrollInterval = setTimeout(this.setActiveItem, 2000);
-  };
-  render() {
-    const { carouselItems, ...rest } = this.props;
-    const { active } = this.state;
-    const { visible, carousel, carouselItem } = this.style;
-    return (
-      <div style={carousel}>
-        {carouselItems.map((item, index) => {
-          const activeStyle = active === index ? visible : {};
-          return React.cloneElement(item, {
-            ...rest,
-            style: {
-              ...carouselItem,
-              ...activeStyle
-            }
-          });
-        })}
-      </div>
-    );
-  }
+  React.useEffect(() => {
+    scrollInterval = setTimeout(() => {
+      const { carouselItems } = props;
+      setActive((active + 1) % carouselItems.length);
+    }, 2000);
+  });
+  const { carouselItems, ...rest } = props;
+  return (
+    <div style={style.carousel}>
+      {carouselItems.map((item, index) => {
+        const activeStyle = active === index ? style.visible : {};
+        return React.cloneElement(item, {
+          ...rest,
+          style: {
+            ...style.carouselItem,
+            ...activeStyle
+          }
+        });
+      })}
+    </div>
+  );
 }
 ```
 
@@ -713,55 +650,46 @@ ReactDOM.render(
 
 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`, which uses `Component.prototype.setState` 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
-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);
-  }
-  
-  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, setIsCollapsed] = React.useState(props.collapsed);
+
+  const style = {
+    collapsed: {
+      display: "none"
+    },
+    expanded: {
+      display: "block"
+    },
+    buttonStyle: {
+      display: "block",
+      width: "100%"
+    }
+  };
+
+  return (
+    <div>
+      <button
+        style={style.buttonStyle}
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
+        {isCollapsed ? "Show" : "Hide"} content
+      </button>
+      <div
+        className="collapse-content"
+        style={isCollapsed ? style.collapsed : style.expanded}
+        aria-expanded={isCollapsed}
+      >
+        {props.children}
       </div>
-    );
-  }
+    </div>
+  );
 }
 ```
 
diff --git a/data/snippet_data.json b/data/snippet_data.json
index 1a2e70ca6..42be599d0 100644
--- a/data/snippet_data.json
+++ b/data/snippet_data.json
@@ -18,9 +18,9 @@
   {
     "name": "Carousel.md",
     "title": "Carousel",
-    "text": "Renders a carousel component.\n\nInitially set `state.active` to `0` (index of the first item).\nUse an object, `style`, to hold the styles for the individual components.\nDefine a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.\nDefine another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component\nfirst renders (on `ComponentDidMount`).\nIn the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\nRender the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest\n`props` along with the computed styles.\n\n",
+    "text": "Renders a carousel component.\n\nUse the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\nUse an object, `style`, to hold the styles for the individual components.\nUse the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\nDestructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\nRender the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
     "codeBlocks": [
-      "```jsx\nclass Carousel extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      active: 0\n    };\n    this.scrollInterval = null;\n    this.style = {\n      carousel: {\n        position: \"relative\"\n      },\n      carouselItem: {\n        position: \"absolute\",\n        visibility: \"hidden\"\n      },\n      visible: {\n        visibility: \"visible\"\n      }\n    };\n  }\n  componentDidMount() {\n    this.changeItem();\n  }\n  setActiveItem = () => {\n    const { carouselItems } = this.props;\n    this.setState(\n      prevState => ({\n        active: (prevState.active + 1) % carouselItems.length\n      }),\n      this.changeItem\n    );\n  };\n  changeItem = () => {\n    this.scrollInterval = setTimeout(this.setActiveItem, 2000);\n  };\n  render() {\n    const { carouselItems, ...rest } = this.props;\n    const { active } = this.state;\n    const { visible, carousel, carouselItem } = this.style;\n    return (\n      <div style={carousel}>\n        {carouselItems.map((item, index) => {\n          const activeStyle = active === index ? visible : {};\n          return React.cloneElement(item, {\n            ...rest,\n            style: {\n              ...carouselItem,\n              ...activeStyle\n            }\n          });\n        })}\n      </div>\n    );\n  }\n}\n```",
+      "```jsx\nfunction Carousel(props) {\n  const [active, setActive] = React.useState(0);\n  let scrollInterval = null;\n  const style = {\n    carousel: {\n      position: \"relative\"\n    },\n    carouselItem: {\n      position: \"absolute\",\n      visibility: \"hidden\"\n    },\n    visible: {\n      visibility: \"visible\"\n    }\n  };\n  React.useEffect(() => {\n    scrollInterval = setTimeout(() => {\n      const { carouselItems } = props;\n      setActive((active + 1) % carouselItems.length);\n    }, 2000);\n  });\n  const { carouselItems, ...rest } = props;\n  return (\n    <div style={style.carousel}>\n      {carouselItems.map((item, index) => {\n        const activeStyle = active === index ? style.visible : {};\n        return React.cloneElement(item, {\n          ...rest,\n          style: {\n            ...style.carouselItem,\n            ...activeStyle\n          }\n        });\n      })}\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Carousel\n    carouselItems={[\n      <div>carousel item 1</div>,\n      <div>carousel item 2</div>,\n      <div>carousel item 3</div>\n    ]}\n  />,\n  document.getElementById(\"root\")\n);\n ```"
     ],
     "expertise": 2,
@@ -35,9 +35,9 @@
   {
     "name": "Collapse.md",
     "title": "Collapse",
-    "text": "Renders a component with collapsible content.\n\nUse the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).\nSet 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.\nUse an object, `style`, to hold the styles for individual components and their states.\nCreate a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn 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`.\nDetermine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.\nFinally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.\n\n",
+    "text": "Renders a component with collapsible content.\n\nUse the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\nUse an object, `style`, to hold the styles for individual components and their states.\nUse 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`.\nDetermine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.\nFinally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.\n\n",
     "codeBlocks": [
-      "```jsx\nclass Collapse extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      collapsed: !!props.collapsed\n    };\n    this.style = {\n      collapsed: {\n        display: 'none'\n      },\n      expanded: {\n        display: 'block'\n      },\n      buttonStyle: {\n        display: 'block',\n        width: '100%'\n      }\n    };\n    this.toggleCollapse = this.toggleCollapse.bind(this);\n  }\n  \n  toggleCollapse() {\n    this.setState(state => ({ collapsed: !state.collapsed }));\n  }\n  \n  render() {\n    return (\n      <div>\n        <button style={this.style.buttonStyle} onClick={this.toggleCollapse}>\n          {this.state.collapsed ? 'Show' : 'Hide'} content\n        </button>\n        <div \n          style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} \n          aria-expanded = {this.state.collapsed}\n        >\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n}\n```",
+      "```jsx\nfunction Collapse(props) {\n  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);\n\n  const style = {\n    collapsed: {\n      display: \"none\"\n    },\n    expanded: {\n      display: \"block\"\n    },\n    buttonStyle: {\n      display: \"block\",\n      width: \"100%\"\n    }\n  };\n\n  return (\n    <div>\n      <button\n        style={style.buttonStyle}\n        onClick={() => setIsCollapsed(!isCollapsed)}\n      >\n        {isCollapsed ? \"Show\" : \"Hide\"} content\n      </button>\n      <div\n        className=\"collapse-content\"\n        style={isCollapsed ? style.collapsed : style.expanded}\n        aria-expanded={isCollapsed}\n      >\n        {props.children}\n      </div>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Collapse>\n    <h1>This is a collapse</h1>\n    <p>Hello world!</p>\n  </Collapse>,\n  document.getElementById('root')\n);\n```"
     ],
     "expertise": 2,
@@ -115,9 +115,9 @@
   {
     "name": "LimitedTextarea.md",
     "title": "LimitedTextarea",
-    "text": "Renders a textarea component with a character limit.\n\nUse the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.\nCreate a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.\nIn the`render()` method, use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to the `handleChange` method.\n\n",
+    "text": "Renders a textarea component with a character limit.\n\nUse the `React.useState()` hook to create the `content` state variable and set its value to `value`.\nCreate a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\nUse the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\nUse a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
     "codeBlocks": [
-      "```jsx\nclass LimitedTextarea extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      content: props.value,\n      characterCount: props.value.length,\n      limit: props.limit\n    };\n    this.handleChange = this.handleChange.bind(this);\n  }\n  \n  handleChange(event) {\n    let newContent = event.target.value;\n    if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);\n    this.setState(state => ({ content: newContent, characterCount: newContent.length }));\n  }\n  render() {\n    return (\n      <div>\n        <textarea \n          rows={this.props.rows} \n          cols={this.props.cols} \n          onChange={this.handleChange} \n          value={this.state.content}\n        >\n        </textarea>\n        <p>{this.state.characterCount}/{this.props.limit}</p>\n      </div>\n    );\n  }\n}\n```",
+      "```jsx\nfunction LimitedTextarea({ rows, cols, value, limit }) {\n  const [content, setContent] = React.useState(value);\n\n  const setFormattedContent = text => {\n    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);\n  };\n\n  React.useEffect(() => {\n    setFormattedContent(content);\n  }, []);\n\n  return (\n    <div>\n      <textarea\n        rows={rows}\n        cols={cols}\n        onChange={event => setFormattedContent(event.target.value)}\n        value={content}\n      />\n      <p>\n        {content.length}/{limit}\n      </p>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <LimitedTextarea limit={32} value='Hello!' />,\n  document.getElementById('root')\n);\n```"
     ],
     "expertise": 0,
@@ -190,9 +190,9 @@
   {
     "name": "PasswordRevealer.md",
     "title": "PasswordRevealer",
-    "text": "Renders a password input field with a reveal button.\n\nInitially set `state.shown` to `false` to ensure that the password is not shown by default.\nCreate a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.\nIn the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field.\nFinally, bind the `<button>`'s `onClick` event to the `toggleShown` method.\n\n",
+    "text": "Renders a password input field with a reveal button.\n\nUse the `React.useState()` hook to create the `shown` state vairable and set its value to `false`.\nUse a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `\"text\"` and `\"password\"`.\n\n",
     "codeBlocks": [
-      "```jsx\nclass PasswordRevealer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      shown: false\n    };\n    this.toggleShown = this.toggleShown.bind(this);\n  }\n\n  toggleShown() {\n    this.setState(state => ({ shown: !state.shown }));\n  }\n\n  render() {\n    return (\n      <div>\n        <input\n          type={this.state.shown ? 'text' : 'password'}\n          value={this.props.value}\n        />\n        <button onClick={this.toggleShown}>Show/Hide</button>\n      </div>\n    );\n  }\n}\n```",
+      "```jsx\nfunction PasswordRevealer({ value }) {\n  const [shown, setShown] = React.useState(false);\n\n  return (\n    <div>\n      <input\n        type={shown ? \"text\" : \"password\"}\n        value={value}\n        onChange={() => {}}\n      />\n      <button onClick={() => setShown(!shown)}>Show/Hide</button>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<PasswordRevealer />, document.getElementById('root'));\n```"
     ],
     "expertise": 0,
@@ -320,10 +320,10 @@
   {
     "name": "TreeView.md",
     "title": "TreeView",
-    "text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse `defaultProps` to set the default values of certain props.\nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nSet the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.\nCreate a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `state`.\nDetermine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. \nFor each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `<p>` element with the appropriate style.\n\n",
+    "text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse object destructuring to set defaults for certain props. \nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nUse the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\nReturn a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.\nDetermine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`. \nFor each child in `data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `<p>` element with the appropriate style.\n\n",
     "codeBlocks": [
       "```css\n.tree-element {\n  margin: 0;\n  position: relative;\n}\n\ndiv.tree-element:before {\n  content: '';\n  position: absolute;\n  top: 24px;\n  left: 1px;\n  height: calc(100% - 48px);\n  border-left: 1px solid gray;\n}\n\n.toggler {\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  width: 0; \n  height: 0; \n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 5px solid gray;\n  cursor: pointer;\n}\n\n.toggler.closed {\n  transform: rotate(90deg);\n}\n\n.collapsed {\n  display: none;\n}\n```",
-      "```jsx\nclass TreeView extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      toggled: props.toggled\n    };\n    this.toggle = this.toggle.bind(this);\n  }\n\n  toggle() {\n    this.setState(state => ({ toggled: !state.toggled }));\n  }\n\n  render() {\n    return (\n      <div\n        style={{ marginLeft: this.props.isChildElement ? 16 : 4 + \"px\" }}\n        className={\n          this.props.isParentToggled ? \"tree-element\" : \"tree-element collapsed\"\n        }\n      >\n        <span\n          className={this.state.toggled ? \"toggler\" : \"toggler closed\"}\n          onClick={this.toggle}\n        />\n        {this.props.name ? (\n          <strong>&nbsp;&nbsp;{this.props.name}: </strong>\n        ) : (\n          <span>&nbsp;&nbsp;</span>\n        )}\n        {Array.isArray(this.props.data) ? \"[\" : \"{\"}\n        {!this.state.toggled && \"...\"}\n        {Object.keys(this.props.data).map(\n          (v, i, a) =>\n            typeof this.props.data[v] == \"object\" ? (\n              <TreeView\n                data={this.props.data[v]}\n                isLast={i === a.length - 1}\n                name={Array.isArray(this.props.data) ? null : v}\n                isChildElement\n                isParentToggled={\n                  this.props.isParentToggled && this.state.toggled\n                }\n              />\n            ) : (\n              <p\n                style={{ marginLeft: 16 + \"px\" }}\n                className={\n                  this.state.toggled ? \"tree-element\" : \"tree-element collapsed\"\n                }\n              >\n                {Array.isArray(this.props.data) ? \"\" : <strong>{v}: </strong>}\n                {this.props.data[v]}\n                {i === a.length - 1 ? \"\" : \",\"}\n              </p>\n            )\n        )}\n        {Array.isArray(this.props.data) ? \"]\" : \"}\"}\n        {!this.props.isLast ? \",\" : \"\"}\n      </div>\n    );\n  }\n}\n\nTreeView.defaultProps = {\n  isLast: true,\n  toggled: true,\n  name: null,\n  isChildElement: false,\n  isParentToggled: true\n}\n```",
+      "```jsx\nfunction TreeView({\n  data,\n  toggled = true,\n  name = null,\n  isLast = true,\n  isChildElement = false,\n  isParentToggled = true\n}) {\n  const [isToggled, setIsToggled] = React.useState(toggled);\n\n  return (\n    <div\n      style={{ marginLeft: isChildElement ? 16 : 4 + \"px\" }}\n      className={isParentToggled ? \"tree-element\" : \"tree-element collapsed\"}\n    >\n      <span\n        className={isToggled ? \"toggler\" : \"toggler closed\"}\n        onClick={() => setIsToggled(!isToggled)}\n      />\n      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}\n      {Array.isArray(data) ? \"[\" : \"{\"}\n      {!isToggled && \"...\"}\n      {Object.keys(data).map(\n        (v, i, a) =>\n          typeof data[v] == \"object\" ? (\n            <TreeView\n              data={data[v]}\n              isLast={i === a.length - 1}\n              name={Array.isArray(data) ? null : v}\n              isChildElement\n              isParentToggled={isParentToggled && isToggled}\n            />\n          ) : (\n            <p\n              style={{ marginLeft: 16 + \"px\" }}\n              className={isToggled ? \"tree-element\" : \"tree-element collapsed\"}\n            >\n              {Array.isArray(data) ? \"\" : <strong>{v}: </strong>}\n              {data[v]}\n              {i === a.length - 1 ? \"\" : \",\"}\n            </p>\n          )\n      )}\n      {Array.isArray(data) ? \"]\" : \"}\"}\n      {!isLast ? \",\" : \"\"}\n    </div>\n  );\n}\n```",
       "```jsx\nlet data = {\n  lorem: {\n    ipsum: \"dolor sit\",\n    amet: {\n      consectetur: \"adipiscing\",\n      elit: [\n        \"duis\",\n        \"vitae\",\n        {\n          semper: \"orci\"\n        },\n        {\n          est: \"sed ornare\"\n        },\n        \"etiam\",\n        [\"laoreet\", \"tincidunt\"],\n        [\"vestibulum\", \"ante\"]\n      ]\n    },\n    ipsum: \"primis\"\n  }\n};\nReactDOM.render(<TreeView data={data} name='data'/>, document.getElementById(\"root\"));\n```"
     ],
     "expertise": 2,