diff --git a/README.md b/README.md
index 78e729de2..1fa1288bf 100644
--- a/README.md
+++ b/README.md
@@ -1001,45 +1001,37 @@ ReactDOM.render(
 
 Renders a ticker component.
 
-- The ticker state is initially set to zero 
-- When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`
-- When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared
-- The `setInterval` is cleared once the desired `time` is reached
-- `time` and `interval` are the required props
+Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.
+Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.
+Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.
 
 ```jsx
-class Ticker extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {ticker: 0}
-		this.interval = null
-	}
+function Ticker(props) {
+  const [ticker, setTicker] = React.useState(0);
+  let interval = null;
 
-	tick = () => {
-		this.reset()
-		this.interval = setInterval(() => {
-			if (this.state.ticker < this.props.times) {
-				this.setState(({ ticker }) => ({ticker: ticker + 1}))
-			}else{
-				clearInterval(this.interval)
-			}
-		}, this.props.interval)
-	}
+  const tick = () => {
+    reset();
+    interval = setInterval(() => {
+      if (ticker < props.times) 
+        setTicker(ticker + 1);
+      else 
+        clearInterval(interval);
+    }, props.interval);
+  }
 
-	reset = () => {
-		this.setState({ticker: 0})
-		clearInterval(this.interval)
-	}
+  const reset = () => {
+    setTicker(0);
+    clearInterval(interval);
+  }
 
-	render() {
-		return (
-			<div>
-				<span style={{fontSize: 100}}>{this.state.ticker}</span>       
-				<button onClick={this.tick}>Tick!</button>
-				<button onClick={this.reset}>Reset</button>
-			</div>
-		);
-	}
+  return (
+    <div>
+      <span style={{ fontSize: 100 }}>{this.state.ticker}</span>
+      <button onClick={this.tick}>Tick!</button>
+      <button onClick={this.reset}>Reset</button>
+    </div>
+  );
 }
 ```
 
@@ -1057,49 +1049,30 @@ ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('r
 
 Renders a toggle component.
 
-Initialize `state.isToggleOn` to `false`, bind the `handleClick` method to the component's context.
+Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.
 Use an object, `style`, to hold the styles for individual components and their states.
-Create a method, `handleClick`, which uses `Component.prototype.setState` to change the component's `state.toggleOn`.
-In the `render()` method, destructure `state` and `style`, create a `<button>` that alters the component's `state` and determine the appearance of the content based on `state.isToggleOn`, applying the appropriate CSS rules from the `style` object.
+Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
 
 ```jsx
-class Toggle extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isToggleOn: false
-    };
-    this.style = {
-      on: {
-        backgroundColor: 'green'
-      },
-      off: {
-        backgroundColor: 'grey'
-      }
-    };
+function Toggle(props) {
+  const [isToggleOn, setIsToggleOn] = React.useState(false);
+  style = {
+    on: {
+      backgroundColor: "green"
+    },
+    off: {
+      backgroundColor: "grey"
+    }
+  };
 
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    this.setState(state => ({
-      isToggleOn: !state.isToggleOn
-    }));
-  }
-
-  render() {
-    const { isToggleOn } = this.state;
-    const { on, off } = this.style;
-
-    return (
-      <button
-        onClick={this.handleClick}
-        style={isToggleOn ? on : off}
-      >
-        {isToggleOn ? 'ON' : 'OFF'}
-      </button>
-    );
-  }
+  return (
+    <button
+      onClick={() => setIsToggleOn(!isToggleOn)}
+      style={isToggleOn ? style.on : style.off}
+    >
+      {isToggleOn ? "ON" : "OFF"}
+    </button>
+  );
 }
 ```
 
@@ -1117,67 +1090,48 @@ ReactDOM.render(<Toggle />, document.getElementById('root'));
 
 Renders a tooltip component.
 
-Set the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.
-Create a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.
-Bind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.
-In the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.
+Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
+Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
+Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
  
+```css
+.tooltip {
+  position: relative;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  visibility: hidden;
+  padding: 5px;
+  border-radius: 5px;
+}
+.tooltip-arrow {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
+}
+```
+
 ```jsx
-class Tooltip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: false
-    };
-    this.style = {
-      tooltip: {
-        position: 'relative',
-        backgroundColor: "rgba(0,0,0,0.7)",
-        color: "white",
-        visibility: "hidden",
-        width: "fit-content",
-        padding: 5,
-        borderRadius: 5
-      },
-      tooltipArrow: {
-        position: 'absolute',
-        top: '100%',
-        left: '50%',
-        borderWidth: 5,
-        borderStyle: 'solid',
-        borderColor: "rgba(0,0,0,0.7) transparent transparent",
-      },
-      visible: {
-        visibility: "visible"
-      },
-    };
-    this.showTooltip = this.toggleTooltip.bind(this, true);
-    this.hideTooltip = this.toggleTooltip.bind(this, false);
-  }
+function Tooltip({ children, text, ...rest }) {
+  const [show, setShow] = React.useState(false);
 
-  toggleTooltip = tooltipState => {
-    this.setState({
-      show: tooltipState
-    });
-  };
-
-  render() {
-    const { children, text, ...rest } = this.props;
-    const { show } = this.state;
-    const { visible, tooltip, tooltipArrow } = this.style;
-    const showTooltip = show ? visible : {};
-    return (
-      <div>
-        <div style={{ ...tooltip, ...showTooltip }}>
-          {text}
-          <span style={tooltipArrow}/>
-        </div>
-        <div {...rest} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
-          {children}
-        </div>
+  return (
+    <div>
+      <div className="tooltip" style={show ? { visibility: "visible" } : {}}>
+        {text}
+        <span className="tooltip-arrow" />
       </div>
-    );
-  }
+      <div
+        {...rest}
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      >
+        {children}
+      </div>
+    </div>
+  );
 }
 ```
 
diff --git a/data/snippet_data.json b/data/snippet_data.json
index 648993aa6..3b19501ad 100644
--- a/data/snippet_data.json
+++ b/data/snippet_data.json
@@ -247,9 +247,9 @@
   {
     "name": "Ticker.md",
     "title": "Ticker",
-    "text": "Renders a ticker component.\n\n- The ticker state is initially set to zero \n- When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`\n- When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared\n- The `setInterval` is cleared once the desired `time` is reached\n- `time` and `interval` are the required props\n\n",
+    "text": "Renders a ticker component.\n\nUse the `React.useState()` hook to initialize the `ticker` state variable to `0`.\nDefine two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.\nReturn a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.\n\n",
     "codeBlocks": [
-      "```jsx\nclass Ticker extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {ticker: 0}\n\t\tthis.interval = null\n\t}\n\n\ttick = () => {\n\t\tthis.reset()\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state.ticker < this.props.times) {\n\t\t\t\tthis.setState(({ ticker }) => ({ticker: ticker + 1}))\n\t\t\t}else{\n\t\t\t\tclearInterval(this.interval)\n\t\t\t}\n\t\t}, this.props.interval)\n\t}\n\n\treset = () => {\n\t\tthis.setState({ticker: 0})\n\t\tclearInterval(this.interval)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<span style={{fontSize: 100}}>{this.state.ticker}</span>       \n\t\t\t\t<button onClick={this.tick}>Tick!</button>\n\t\t\t\t<button onClick={this.reset}>Reset</button>\n\t\t\t</div>\n\t\t);\n\t}\n}\n```",
+      "```jsx\nfunction Ticker(props) {\n  const [ticker, setTicker] = React.useState(0);\n  let interval = null;\n\n  const tick = () => {\n    reset();\n    interval = setInterval(() => {\n      if (ticker < props.times) \n        setTicker(ticker + 1);\n      else \n        clearInterval(interval);\n    }, props.interval);\n  }\n\n  const reset = () => {\n    setTicker(0);\n    clearInterval(interval);\n  }\n\n  return (\n    <div>\n      <span style={{ fontSize: 100 }}>{this.state.ticker}</span>\n      <button onClick={this.tick}>Tick!</button>\n      <button onClick={this.reset}>Reset</button>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));\n```"
     ],
     "expertise": 1,
@@ -263,9 +263,9 @@
   {
     "name": "Toggle.md",
     "title": "Toggle",
-    "text": "Renders a toggle component.\n\nInitialize `state.isToggleOn` to `false`, bind the `handleClick` method to the component's context.\nUse an object, `style`, to hold the styles for individual components and their states.\nCreate a method, `handleClick`, which uses `Component.prototype.setState` to change the component's `state.toggleOn`.\nIn the `render()` method, destructure `state` and `style`, create a `<button>` that alters the component's `state` and determine the appearance of the content based on `state.isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
+    "text": "Renders a toggle component.\n\nUse the `React.useState()` to initialize the `isToggleOn` state variable to `false`.\nUse an object, `style`, to hold the styles for individual components and their states.\nReturn a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
     "codeBlocks": [
-      "```jsx\nclass Toggle extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isToggleOn: false\n    };\n    this.style = {\n      on: {\n        backgroundColor: 'green'\n      },\n      off: {\n        backgroundColor: 'grey'\n      }\n    };\n\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick() {\n    this.setState(state => ({\n      isToggleOn: !state.isToggleOn\n    }));\n  }\n\n  render() {\n    const { isToggleOn } = this.state;\n    const { on, off } = this.style;\n\n    return (\n      <button\n        onClick={this.handleClick}\n        style={isToggleOn ? on : off}\n      >\n        {isToggleOn ? 'ON' : 'OFF'}\n      </button>\n    );\n  }\n}\n```",
+      "```jsx\nfunction Toggle(props) {\n  const [isToggleOn, setIsToggleOn] = React.useState(false);\n  style = {\n    on: {\n      backgroundColor: \"green\"\n    },\n    off: {\n      backgroundColor: \"grey\"\n    }\n  };\n\n  return (\n    <button\n      onClick={() => setIsToggleOn(!isToggleOn)}\n      style={isToggleOn ? style.on : style.off}\n    >\n      {isToggleOn ? \"ON\" : \"OFF\"}\n    </button>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<Toggle />, document.getElementById('root'));\n```"
     ],
     "expertise": 0,
@@ -279,9 +279,10 @@
   {
     "name": "Tooltip.md",
     "title": "Tooltip",
-    "text": "Renders a tooltip component.\n\nSet the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.\nCreate a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.\nBind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.\nIn the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.\n \n",
+    "text": "Renders a tooltip component.\n\nUse the `React.useState()` hook to create the `show` variable and initialize it to `false`.\nReturn a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.\nHandle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.\n \n",
     "codeBlocks": [
-      "```jsx\nclass Tooltip extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: false\n    };\n    this.style = {\n      tooltip: {\n        position: 'relative',\n        backgroundColor: \"rgba(0,0,0,0.7)\",\n        color: \"white\",\n        visibility: \"hidden\",\n        width: \"fit-content\",\n        padding: 5,\n        borderRadius: 5\n      },\n      tooltipArrow: {\n        position: 'absolute',\n        top: '100%',\n        left: '50%',\n        borderWidth: 5,\n        borderStyle: 'solid',\n        borderColor: \"rgba(0,0,0,0.7) transparent transparent\",\n      },\n      visible: {\n        visibility: \"visible\"\n      },\n    };\n    this.showTooltip = this.toggleTooltip.bind(this, true);\n    this.hideTooltip = this.toggleTooltip.bind(this, false);\n  }\n\n  toggleTooltip = tooltipState => {\n    this.setState({\n      show: tooltipState\n    });\n  };\n\n  render() {\n    const { children, text, ...rest } = this.props;\n    const { show } = this.state;\n    const { visible, tooltip, tooltipArrow } = this.style;\n    const showTooltip = show ? visible : {};\n    return (\n      <div>\n        <div style={{ ...tooltip, ...showTooltip }}>\n          {text}\n          <span style={tooltipArrow}/>\n        </div>\n        <div {...rest} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>\n          {children}\n        </div>\n      </div>\n    );\n  }\n}\n```",
+      "```css\n.tooltip {\n  position: relative;\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  visibility: hidden;\n  padding: 5px;\n  border-radius: 5px;\n}\n.tooltip-arrow {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  border-width: 5px;\n  border-style: solid;\n  border-color: rgba(0, 0, 0, 0.7) transparent transparent;\n}\n```",
+      "```jsx\nfunction Tooltip({ children, text, ...rest }) {\n  const [show, setShow] = React.useState(false);\n\n  return (\n    <div>\n      <div className=\"tooltip\" style={show ? { visibility: \"visible\" } : {}}>\n        {text}\n        <span className=\"tooltip-arrow\" />\n      </div>\n      <div\n        {...rest}\n        onMouseEnter={() => setShow(true)}\n        onMouseLeave={() => setShow(false)}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n```",
       "```jsx\n ReactDOM.render(\n     <Tooltip text='Simple tooltip'>\n       <button>Hover me!</button>\n     </Tooltip>,\n     document.getElementById('root')\n );\n```"
     ],
     "expertise": 1,
diff --git a/snippets/Tooltip.md b/snippets/Tooltip.md
index d99d1bca0..cf9e8285d 100644
--- a/snippets/Tooltip.md
+++ b/snippets/Tooltip.md
@@ -2,67 +2,47 @@
 
 Renders a tooltip component.
 
-Set the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.
-Create a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.
-Bind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.
-In the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.
+Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
+Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
+Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
  
+```css
+.tooltip {
+  position: relative;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  visibility: hidden;
+  padding: 5px;
+  border-radius: 5px;
+}
+.tooltip-arrow {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
+}
+```
 ```jsx
-class Tooltip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: false
-    };
-    this.style = {
-      tooltip: {
-        position: 'relative',
-        backgroundColor: "rgba(0,0,0,0.7)",
-        color: "white",
-        visibility: "hidden",
-        width: "fit-content",
-        padding: 5,
-        borderRadius: 5
-      },
-      tooltipArrow: {
-        position: 'absolute',
-        top: '100%',
-        left: '50%',
-        borderWidth: 5,
-        borderStyle: 'solid',
-        borderColor: "rgba(0,0,0,0.7) transparent transparent",
-      },
-      visible: {
-        visibility: "visible"
-      },
-    };
-    this.showTooltip = this.toggleTooltip.bind(this, true);
-    this.hideTooltip = this.toggleTooltip.bind(this, false);
-  }
+function Tooltip({ children, text, ...rest }) {
+  const [show, setShow] = React.useState(false);
 
-  toggleTooltip = tooltipState => {
-    this.setState({
-      show: tooltipState
-    });
-  };
-
-  render() {
-    const { children, text, ...rest } = this.props;
-    const { show } = this.state;
-    const { visible, tooltip, tooltipArrow } = this.style;
-    const showTooltip = show ? visible : {};
-    return (
-      <div>
-        <div style={{ ...tooltip, ...showTooltip }}>
-          {text}
-          <span style={tooltipArrow}/>
-        </div>
-        <div {...rest} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
-          {children}
-        </div>
+  return (
+    <div>
+      <div className="tooltip" style={show ? { visibility: "visible" } : {}}>
+        {text}
+        <span className="tooltip-arrow" />
       </div>
-    );
-  }
+      <div
+        {...rest}
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      >
+        {children}
+      </div>
+    </div>
+  );
 }
 ```