From 8095487476f824acac8941e5d6edab7d3805f8d3 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 12 Feb 2019 21:22:50 +0200
Subject: [PATCH] Update Toggle

---
 snippets/Toggle.md | 59 ++++++++++++++++------------------------------
 1 file changed, 20 insertions(+), 39 deletions(-)

diff --git a/snippets/Toggle.md b/snippets/Toggle.md
index 92e86ab16..fc28ef00d 100644
--- a/snippets/Toggle.md
+++ b/snippets/Toggle.md
@@ -2,49 +2,30 @@
 
 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>
+  );
 }
 ```