From 8beac418643d27f0e71876e48ce9d6935ff70e23 Mon Sep 17 00:00:00 2001
From: rahmanEsyms <esyms@gmail.com>
Date: Mon, 28 Feb 2022 03:00:20 +0800
Subject: [PATCH] Update 1-form-validation

---
 src/Home.js | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/Home.js b/src/Home.js
index afa7452a0..d7474ce43 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -6,24 +6,37 @@ function Home() {
   const [text, setText] = useState("");
   const [isReady, setIsReady] = useState(false);
 
+  const handleChange = (e) => {
+    setText(e.target.value);
+  }
+
+  useEffect(() => {
+    text === "Ready!" ?
+      setIsReady(true) :
+      setIsReady(false);
+  }, [text])
+
   return (
     <div className="App">
       <header className="App-header">
-        <img
-          hidden={!isReady}
-          src="https://www.freeiconspng.com/uploads/file-pokeball-png-0.png"
-          className="App-logo"
-          alt="logo"
-          style={{ padding: "10px" }}
-        />
+        <NavLink to="/pokedex">
+          <img
+            hidden={!isReady}
+            src="https://www.freeiconspng.com/uploads/file-pokeball-png-0.png"
+            className="App-logo"
+            alt="logo"
+            style={{ padding: "10px" }}
+          />
+        </NavLink>
         <b>
           Requirement: Try to show the hidden image and make it clickable that
           goes to /pokedex when the input below is "Ready!" remember to hide the
           red text away when "Ready!" is in the textbox.
         </b>
         <p>Are you ready to be a pokemon master?</p>
-        <input type="text" name="name" />
-        <span style={{ color: "red" }}>I am not ready yet!</span>
+        <input value={text} onChange={handleChange} type="text" name="name" />
+        <span hidden={isReady}
+          style={{ color: "red" }}>I am not ready yet!</span>
       </header>
     </div>
   );