Merge pull request #45 from phaniteja1/password-revealer

Password revealer

snippets/PasswordRevealer.md

@@ -2,36 +2,23 @@
 
 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.
+Use the `React.useState()` hook to create the `shown` state vairable and set its value to `false`.
-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.
+Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
-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.
 
 ```jsx
-class PasswordRevealer extends React.Component {
+function PasswordRevealer({ value }) {
-  constructor(props) {
+  const [shown, setShown] = React.useState(false);
-    super(props);
-    this.state = {
-      shown: false
-    };
-    this.toggleShown = this.toggleShown.bind(this);
-  }
 
-  toggleShown() {
+  return (
-    this.setState(state => ({ shown: !state.shown }));
+    <div>
-  }
+      <input
-
+        type={shown ? "text" : "password"}
-  render() {
+        value={value}
-    return (
+        onChange={() => {}}
-      <div>
+      />
-        <input
+      <button onClick={() => setShown(!shown)}>Show/Hide</button>
-          type={this.state.shown ? 'text' : 'password'}
+    </div>
-          value={this.props.value}
+  );
-        />
-        <button onClick={this.toggleShown}>Show/Hide</button>
-      </div>
-    );
-  }
 }
 ```