title: How to perform Update logic using React Hooks?
body: <p>So, in this case, when the user clicks an edit link on the database table, they are redirected to an update form, but the data does not render on the registration form. I expect the parameters within that objectID to render on the input fields, so that when the update button is clicked, the data is modified in the server. Also, the console message implies that a successful PUT request has been made when that form is filled manually. What could be wrong?</p>
  <h2>Database table code:</h2>
  <pre><code>const Admin = () =&gt; {
    const [tabulate, setTabulate] = useState([]);
    const getRequest = async () =&gt; {
      try {
        const res = await axios.get(&quot;http://localhost:8080/register&quot;);
        console.log(res.statusText);
        setTabulate(res.data);
      } catch (err) {
        console.log(err);
      }
    };
  
    useEffect(() =&gt; {
      getRequest();
    }, []);
  
    const handleDelete = (_id) =&gt; {
      axios
        .delete(&quot;http://localhost:8080/register/&quot; + _id)
        .then((res) =&gt; {
          console.log(res.statusText);
          getRequest();
        })
        .catch((err) =&gt; {
          console.log(err);
        });
    };
  
    return (
      &lt;div className=&quot;page-wrapper&quot;&gt;
        &lt;h3&gt;Database Administrator&lt;/h3&gt;
        &lt;Table striped bordered hover className=&quot;data-table&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;Business Name&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Category&lt;/th&gt;
              &lt;th&gt;Edit&lt;/th&gt;
              &lt;th&gt;Delete&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {tabulate.map((item) =&gt; (
              &lt;tr key={item._id}&gt;
                &lt;td&gt;{item.ID}&lt;/td&gt;
                &lt;td&gt;{item.firstName}&lt;/td&gt;
                &lt;td&gt;{item.lastName}&lt;/td&gt;
                &lt;td&gt;{item.businessName}&lt;/td&gt;
                &lt;td&gt;{item.address}&lt;/td&gt;
                &lt;td&gt;{item.email}&lt;/td&gt;
                &lt;td&gt;{item.businessPhone}&lt;/td&gt;
                &lt;td&gt;{item.category}&lt;/td&gt;
                &lt;td&gt;
                  &lt;Button
                    bg=&quot;success&quot;
                    variant=&quot;dark&quot;
                    style={{
                      color: &quot;white&quot;,
                      marginLeft: &quot;0px&quot;,
                      fontSize: &quot;10px&quot;,
                    }}
                  &gt;
                    &lt;Link to={`/edit-vendor/${item._id}`} className=&quot;links&quot;&gt;
                      Edit
                    &lt;/Link&gt;
                    &lt;Routes&gt;
                      &lt;Route
                        path=&quot;/edit-vendor/:ID&quot;
                        element={&lt;EditVendor /&gt;}
                      /&gt;
                    &lt;/Routes&gt;
                  &lt;/Button&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;Button
                    bg=&quot;danger&quot;
                    variant=&quot;dark&quot;
                    size=&quot;sm&quot;
                    style={{
                      color: &quot;white&quot;,
                      marginLeft: &quot;0px&quot;,
                      fontSize: &quot;10px&quot;,
                    }}
                    onClick={(e) =&gt; handleDelete(item._id)}
                  &gt;
                    Delete
                  &lt;/Button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            ))}
          &lt;/tbody&gt;
        &lt;/Table&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>The Link element with an objectID redirects the user to the update form.</p>
  <h2>Update form:</h2>
  <pre><code>const EditVendor = () =&gt; {
    let navigate = useNavigate();
    const params = useParams();
  
    const [ID, setVendorID] = useState(0);
    const [firstName, setFirstName] = useState(&quot;&quot;);
    const [lastName, setLastName] = useState(&quot;&quot;);
    const [businessName, setBusinessName] = useState(&quot;&quot;);
    const [address, setAddress] = useState(&quot;&quot;);
    const [email, setEmail] = useState(&quot;&quot;);
    const [businessPhone, setBusinessPhone] = useState(0);
    const [category, setCategory] = useState(&quot;&quot;);
    const [photos, setPhotos] = useState(&quot;&quot;);
  
    useEffect(() =&gt; {
      axios
        .get(`http://localhost:8080/register/`, {ID: params.ID})
        .then((res) =&gt; {
          const vendorData = res.data;
          console.log(vendorData);
          setVendorID(vendorData.ID);
          setFirstName(vendorData.firstName);
          setLastName(vendorData.lastName);
          setBusinessName(vendorData.businessName);
          setAddress(vendorData.address);
          setEmail(vendorData.email);
          setBusinessPhone(vendorData.businessPhone);
          setCategory(vendorData.category);
          setPhotos(vendorData.photos);
        })
        .catch((err) =&gt; {
          console.log(err);
        });
    }, [params.ID]);
  
    const handleUpdate = (id, e) =&gt; {
      e.preventDefault();
      axios
        .put(`http://localhost:8080/register/${ID}`, {
          ID,
          firstName,
          lastName,
          businessName,
          address,
          email,
          businessPhone,
          category,
          photos,
        })
        .then((res) =&gt; {
          console.log(res.data);
          navigate(&quot;/admin&quot;);
        })
        .catch((err) =&gt; {
          console.log(err);
        });
    };
  
    return (
      &lt;div
        className=&quot;page-wrapper-form&quot;
        onSubmit={(ID, e) =&gt; handleUpdate(ID, e)}
      &gt;
        &lt;form className=&quot;update-form&quot; encType=&quot;multipart/form-data&quot;&gt;
          &lt;h3&gt;Update Form (Admin)&lt;/h3&gt;
          &lt;label htmlFor=&quot;vendorID&quot;&gt;Your ID:&lt;/label&gt;
          &lt;input
            type=&quot;number&quot;
            id=&quot;ID&quot;
            name=&quot;ID&quot;
            // disabled
            value={ID}
            onChange={(e) =&gt; {
              setVendorID(e.target.value);
            }}
            style={{ backgroundColor: &quot;gray&quot;, color: &quot;white&quot; }}
          /&gt;
          &lt;label htmlFor=&quot;firstName&quot;&gt;First Name:&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;firstName&quot;
            name=&quot;firstName&quot;
            minLength={1}
            maxLength={50}
            spellCheck=&quot;false&quot;
            autoCapitalize=&quot;on&quot;
            value={firstName}
            onChange={(e) =&gt; {
              setFirstName(e.target.value);
            }}
          /&gt;
          &lt;label htmlFor=&quot;lastname&quot;&gt;Last Name:&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;lastName&quot;
            name=&quot;lastName&quot;
            minLength={1}
            maxLength={50}
            spellCheck=&quot;false&quot;
            autoCapitalize=&quot;on&quot;
            value={lastName}
            onChange={(e) =&gt; {
              setLastName(e.target.value);
            }}
          /&gt;
          &lt;label htmlFor=&quot;businessname&quot;&gt;Business Name:&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;businessName&quot;
            name=&quot;businessName&quot;
            minLength={1}
            maxLength={50}
            spellCheck=&quot;false&quot;
            autoCapitalize=&quot;on&quot;
            value={businessName}
            onChange={(e) =&gt; {
              setBusinessName(e.target.value);
            }}
          /&gt;
          &lt;label htmlFor=&quot;address&quot;&gt;Address:&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;address&quot;
            name=&quot;address&quot;
            minLength={1}
            maxLength={50}
            spellCheck=&quot;false&quot;
            autoCapitalize=&quot;on&quot;
            value={address}
            onChange={(e) =&gt; {
              setAddress(e.target.value);
            }}
          /&gt;
          &lt;label htmlFor=&quot;email&quot;&gt;Email:&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;email&quot;
            name=&quot;email&quot;
            minLength={1}
            maxLength={50}
            spellCheck=&quot;false&quot;
            value={email}
            onChange={(e) =&gt; {
              setEmail(e.target.value);
            }}
          /&gt;
          &lt;label htmlFor=&quot;businessPhone&quot;&gt;Business Phone:&lt;/label&gt;
          &lt;input
            type=&quot;tel&quot;
            id=&quot;businessPhone&quot;
            name=&quot;businessPhone&quot;
            size={11}
            value={businessPhone}
            onChange={(e) =&gt; {
              setBusinessPhone(e.target.value);
            }}
          /&gt;
          &lt;label htmlFor=&quot;category&quot;&gt;Category:&lt;/label&gt;
          &lt;select
            id=&quot;category&quot;
            value={category}
            onChange={(e) =&gt; {
              setCategory(e.target.value);
            }}
          &gt;
            &lt;option value=&quot;No selection&quot; name=&quot;No Selection&quot;&gt;
              --Select--
            &lt;/option&gt;
            &lt;option value=&quot;Okirika&quot; name=&quot;Okrika&quot;&gt;
              Okirika
            &lt;/option&gt;
            &lt;option value=&quot;Fabrics&quot; name=&quot;Fabrics&quot;&gt;
              Fabrics
            &lt;/option&gt;
            &lt;option value=&quot;Provisions&quot; name=&quot;Provisions&quot;&gt;
              Provisions
            &lt;/option&gt;
            &lt;option
              value=&quot;Computers and accessories&quot;
              name=&quot;Computers and accessories&quot;
            &gt;
              Computers and accessories
            &lt;/option&gt;
            &lt;option value=&quot;Spare parts&quot; name=&quot;Spare parts&quot;&gt;
              Spare parts
            &lt;/option&gt;
            &lt;option value=&quot;Foodstuff&quot; name=&quot;Foodstuff&quot;&gt;
              Foodstuff
            &lt;/option&gt;
            &lt;option value=&quot;Leather goods&quot; name=&quot;Leather goods&quot;&gt;
              Leather goods
            &lt;/option&gt;
            &lt;option value=&quot;Building materials&quot; name=&quot;Building materials&quot;&gt;
              Building materials
            &lt;/option&gt;
            &lt;option value=&quot;Vehicles&quot; name=&quot;Vehicles&quot;&gt;
              Vehicles
            &lt;/option&gt;
          &lt;/select&gt;
          &lt;label htmlFor=&quot;photos&quot;&gt;Upload photos:&lt;/label&gt;
          &lt;span
            style={{ color: &quot;tomato&quot;, fontSize: &quot;0.7rem&quot;, marginLeft: &quot;56px&quot; }}
          &gt;
            (Only JPG/JPEG and PNG are accepted.)
          &lt;/span&gt;
          &lt;input
            type=&quot;text&quot;
            className=&quot;photos&quot;
            name=&quot;photos&quot;
            value={photos}
            onChange={(e) =&gt; {
              setPhotos(e.target.value);
            }}
          /&gt;
          &lt;button type=&quot;submit&quot; id=&quot;update-btn&quot;&gt;
            Submit
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>It is expected that the data from the table will be rendered on the input fields in this form, but that does not work.</p>
  <p>Then, this is how the backend code looks.</p>
  <h2>Backend code:</h2>
  <pre><code>exports.update = (req, res) =&gt; {
    const id = req.params._id;
  
    Registered.findByIdAndUpdate(id, { $set: req.body }, (err, data, next) =&gt; {
      if (err) {
        console.log(err);
        return next(err);
      } else {
        res.status(200).json(data);
        console.log(
          `Vendor information was updated successfully!`
        );
      }
    });
  };
  </code></pre>