From 20b431295fb93929facc05d58d8de42377a4e754 Mon Sep 17 00:00:00 2001
From: Dani <dani.bonilha@live.com>
Date: Sat, 27 Oct 2018 14:35:37 -0300
Subject: [PATCH 1/2] Create Toggle.md snippet

---
 snippets/Toggle.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 snippets/Toggle.md

diff --git a/snippets/Toggle.md b/snippets/Toggle.md
new file mode 100644
index 000000000..f70a12fff
--- /dev/null
+++ b/snippets/Toggle.md
@@ -0,0 +1,58 @@
+### Toggle
+
+Renders a toggle component.
+
+The `state` of the component default to `false` and bind the `handleClick` method to the component's context.
+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` from toggleOn to toggleOff and vice versa.
+In the `render()` method, destruct `state` and `style` to abbreviate typing, use a  `<button>` that alters the component's `state`.
+Determine the appearance of the content, based on `state.isToggleOn` and apply 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'
+      }
+    };
+
+    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>
+    );
+  }
+}
+```
+
+```jsx
+ReactDOM.render(<Toggle />, document.getElementById('root'));
+```
+
+<!-- tags: visual,toggle,state,class  -->
+
+<!-- expertise: 0 -->
\ No newline at end of file

From 7538a593eafdcc21421f69e1ba888af335ed26b4 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 3 Dec 2018 20:35:24 +0200
Subject: [PATCH 2/2] Update Toggle.md

---
 snippets/Toggle.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/snippets/Toggle.md b/snippets/Toggle.md
index f70a12fff..92e86ab16 100644
--- a/snippets/Toggle.md
+++ b/snippets/Toggle.md
@@ -2,11 +2,10 @@
 
 Renders a toggle component.
 
-The `state` of the component default to `false` and bind the `handleClick` method to the component's context.
+Initialize `state.isToggleOn` to `false`, bind the `handleClick` method to the component's context.
 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` from toggleOn to toggleOff and vice versa.
-In the `render()` method, destruct `state` and `style` to abbreviate typing, use a  `<button>` that alters the component's `state`.
-Determine the appearance of the content, based on `state.isToggleOn` and apply the appropriate CSS rules from the `style` object.
+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.
 
 ```jsx
 class Toggle extends React.Component {
@@ -53,6 +52,6 @@ class Toggle extends React.Component {
 ReactDOM.render(<Toggle />, document.getElementById('root'));
 ```
 
-<!-- tags: visual,toggle,state,class  -->
+<!-- tags: visual,state,class  -->
 
-<!-- expertise: 0 -->
\ No newline at end of file
+<!-- expertise: 0 -->