From 088b247ad9a6f42d04fae8d62834b48c42f89dee Mon Sep 17 00:00:00 2001
From: komv8i <phani.komaravolu@cchmc.org>
Date: Thu, 7 Feb 2019 11:22:58 -0500
Subject: [PATCH 1/2] change password revealer component to hooks
 implementation

---
 snippets/PasswordRevealer.md | 38 +++++++++++++++---------------------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
index 731f1030b..24263d8ff 100644
--- a/snippets/PasswordRevealer.md
+++ b/snippets/PasswordRevealer.md
@@ -8,30 +8,24 @@ In the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button
 Finally, bind the `<button>`'s `onClick` event to the `toggleShown` method.
 
 ```jsx
-class PasswordRevealer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      shown: false
-    };
-    this.toggleShown = this.toggleShown.bind(this);
-  }
+function PasswordRevealer(props) {
+  const { value } = props;
 
-  toggleShown() {
-    this.setState(state => ({ shown: !state.shown }));
-  }
+  const [shown, setShown] = useState(false);
+  const toggleShown = () => {
+    setShown(!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={() => toggleShown()}>Show/Hide</button>
+    </div>
+  );
 }
 ```
 

From 145883c2c1258f6ade7efc7865f10f1645a861ef Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 12 Feb 2019 20:19:35 +0200
Subject: [PATCH 2/2] Update PasswordRevealer.md

---
 snippets/PasswordRevealer.md | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
index 24263d8ff..7e27c3e09 100644
--- a/snippets/PasswordRevealer.md
+++ b/snippets/PasswordRevealer.md
@@ -2,19 +2,12 @@
 
 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
-function PasswordRevealer(props) {
-  const { value } = props;
-
-  const [shown, setShown] = useState(false);
-  const toggleShown = () => {
-    setShown(!shown);
-  };
+function PasswordRevealer({ value }) {
+  const [shown, setShown] = React.useState(false);
 
   return (
     <div>
@@ -23,7 +16,7 @@ function PasswordRevealer(props) {
         value={value}
         onChange={() => {}}
       />
-      <button onClick={() => toggleShown()}>Show/Hide</button>
+      <button onClick={() => setShown(!shown)}>Show/Hide</button>
     </div>
   );
 }