From c9d1d1a898c436a3bc12c15523ada4a75563a1ba Mon Sep 17 00:00:00 2001
From: le-mahf <46358903+le-mahf@users.noreply.github.com>
Date: Wed, 6 Feb 2019 07:58:09 +0000
Subject: [PATCH] Add hooks version

---
 snippets/PasswordRevealer.md | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
index 731f1030b..bc973b696 100644
--- a/snippets/PasswordRevealer.md
+++ b/snippets/PasswordRevealer.md
@@ -2,6 +2,8 @@
 
 Renders a password input field with a reveal button.
 
+#### Class version
+
 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.
@@ -36,9 +38,40 @@ class PasswordRevealer extends React.Component {
 ```
 
 ```jsx
-ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));
+ReactDOM.render(
+  <PasswordRevealer />,
+  document.getElementById('root')
+);
 ```
 
+#### Function version
+
+Initialize a state variable `shown` to denote whether or not the password is revealed. Set its initial value to `false`.
+In the `render()` method, return a `<div>` element wrapping the `<input>` element which holds the password and the `<button>` element which reveals or hides it. Bind the button's `onClick` event to the `setShown` function that switches the state variable `shown`'s value from `true` to `false` and vice versa.
+
+```jsx
+function PasswordRevealer() {
+  const [shown, setShown] = useState(false);
+
+  return (
+    <div>
+      <input type={shown ? 'text' : 'password'} />
+      <button onClick={() => setShown(!shown)}>
+        {shown ? 'Hide' : 'Show'}
+      </button>
+    </div>
+  )
+}
+```
+
+```jsx
+ReactDOM.render(
+  <PasswordRevealer />,
+  document.getElementById('root')
+);
+```
+
+
 <!--tags: input,state,class -->
 
 <!--expertise: 0 -->