solution with alternative approaches

04_react_forms/project_showcase/src/components/ProjectForm.js

@@ -9,22 +9,78 @@ const ProjectForm = ({ onAddProject }) => {
     image: ""
   })
 
-  const handleOnChange = (e) => {
-    setFormData(formData => {
-      return {
-        ...formData,
-        [e.target.name]: e.target.value
-      }
-    })
-  }
+  // const handleOnChange = (e) => {
+  //   setFormData(formData => {
+  //     return {
+  //       ...formData,
+  //       [e.target.name]: e.target.value
+  //     }
+  //   })
+  // }
 
   const handleOnSubmit = (e) => {
     e.preventDefault();
-    onAddProject(formData)
+    onAddProject({
+      name: name,
+      about: about,
+      phase: phase,
+      link: link,
+      image: image
+  })
+  }
+  // const { name, about, phase, link, image } = formData;
+
+  const [name, setName] = useState("");
+  const [about, setAbout] = useState("");
+  const [phase, setPhase] = useState("");
+  const [link, setLink] = useState("");
+  const [image, setImage] = useState("");
+
+
+  // one handler for all inputs
+  // const handleOnChange = (e) => {
+  //   switch (e.target.name) {
+  //     case "name":
+  //       setName(e.target.value);
+  //       break;
+  //     case "about":
+  //       setAbout(e.target.value);
+  //       break;
+  //     case "phase":
+  //       setPhase(e.target.value);
+  //       break;
+  //     case "link":
+  //       setLink(e.target.value);
+  //       break;
+  //     case "image":
+  //       setImage(e.target.value);
+  //       break;
+  //     default:
+  //       break;
+  //   }
+  // }
+
+  // or separate handlers for each input
+  const handleNameChange = (e) => {
+    setName(e.target.value);
   }
 
+  const handleAboutChange = (e) => {
+    setAbout(e.target.value);
+  }
+
+  const handlePhaseChange = (e) => {
+    setPhase(e.target.value);
+  }
+
+  const handleLinkChange = (e) => {
+    setLink(e.target.value);
+  }
+
+  const handleImageChange = (e) => {
+    setImage(e.target.value);
+  }
 
-  const { name, about, phase, link, image } = formData;
   return (
     <section>
       <form onSubmit={handleOnSubmit} className="form" autoComplete="off">
@@ -36,23 +92,23 @@ const ProjectForm = ({ onAddProject }) => {
           id="name" 
           name="name"
           value={name}
-          onChange={handleOnChange}
+          onChange={handleNameChange}
         />
 
         <label htmlFor="about">About</label>
         <textarea 
           id="about" 
           name="about"
           value={about}
-          onChange={handleOnChange}
+          onChange={handleAboutChange}
         />
 
         <label htmlFor="phase">Phase</label>
         <select
           name="phase"
           id="phase"
           value={phase}
-          onChange={handleOnChange}
+          onChange={handlePhaseChange}
         >
           <option>Select One</option>
           <option value="1">Phase 1</option>
@@ -68,7 +124,7 @@ const ProjectForm = ({ onAddProject }) => {
           id="link" 
           name="link"
           value={link}
-          onChange={handleOnChange}
+          onChange={handleLinkChange}
         />
 
         <label htmlFor="image">Screenshot</label>
@@ -77,7 +133,7 @@ const ProjectForm = ({ onAddProject }) => {
           id="image" 
           name="image" 
           value={image}
-          onChange={handleOnChange}
+          onChange={handleImageChange}
         />
 
         <button type="submit">Add Project</button>