complete react-changing-complex-state-practice

Author: rowantseng

react-changing-complex-state-practice/src/components/App.jsx

@@ -4,20 +4,46 @@ function App() {
   const [contact, setContact] = useState({
     fName: "",
     lName: "",
-    email: ""
+    email: "",
   });
 
+  function handleChange(event) {
+    const {name, value} = event.target;
+
+    setContact((prevValue) => {
+      if (name === "fName") {
+        return {
+          fName: value,
+          lName: prevValue.lName,
+          email: prevValue.email,
+        };
+      } else if (name === "lName") {
+        return {
+          fName: prevValue.fName,
+          lName: value,
+          email: prevValue.email,
+        };
+      } else if (name === "email") {
+        return {
+          fName: prevValue.fName,
+          lName: prevValue.lName,
+          email: value,
+        };
+      }
+    });
+  }
+
   return (
     <div className="container">
       <h1>
         Hello {contact.fName} {contact.lName}
       </h1>
       <p>{contact.email}</p>
-      <form>
-        <input name="fName" placeholder="First Name" />
-        <input name="lName" placeholder="Last Name" />
-        <input name="email" placeholder="Email" />
-        <button>Submit</button>
+      <form onChange={handleChange}>
+        <input name="fName" placeholder="First Name" value={contact.fName} />
+        <input name="lName" placeholder="Last Name" value={contact.lName} />
+        <input name="email" placeholder="Email" value={contact.email} />
+        <button type="submit">Submit</button>
       </form>
     </div>
   );