I’m trying to create an edit profile page, and it mostly works. When I open the page, the text fields have the corresponding information from the database, and when I make changes and submit, the information is saved to the database.

My problem is if I don’t make any changes to the input and submit it, it erases the information that was previously in that field of the database.

If no changes are made, I want the information in that field to remain the same but I can’t figure out what I’m doing wrong.

Edit profile page:

const EditProfile = () => {
    const [cookies, setCookie, removeCookie] = useCookies(null);
    const userId = cookies.UserId;

      const getUser = async () => {
        try {
          const response = await axios.get("http://localhost:4000/user", {
            params: { userId },
          });
          setUser(response?.data);
        } catch (error) {
          console.log(error);
        };
      };

       useEffect(() => {
         getUser();
       }, []);

  const [user, setUser] = useState(null);
  
  const [formData, setFormData] = useState({
    user_id: cookies.UserId,
    first_name: "",
    gender_identity: "",
    about: ""
  });

  let navigate = useNavigate();

      
  const handleSubmit = async (e) => {
    console.log("submitted");
    e.preventDefault();
    try {
      const response = await axios.put("http://localhost:4000/editprofile", {
        formData,
      });
      console.log(response);
      const success = response.status === 200;
      if (success) navigate("/dashboard");
    } catch (err) {
      console.log(err);
    }
  };

  const handleChange = (e) => {
    console.log("e", e);
    const value =
      e.target.type === "checkbox" ? e.target.checked : e.target.value;
    const name = e.target.name;

    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <>
      <Nav minimal={true} setShowModal={() => {}} showModal={false} />

      <div className="onboarding">
        <h2>EDIT </h2>

        <form onSubmit={handleSubmit}>
          <section>
            <label htmlFor="first_name">First Name</label>
            <input
              id="first_name"
              type="text"
              name="first_name"
              required={true}
               defaultValue={user?.first_name}
               key={formData.first_name}
              onChange={handleChange}
            />

            <label>Gender</label>
            <div className="multiple-input-container">
              <input
                id="man-gender-identity"
                type="radio"
                name="gender_identity"
                value="man"
                onChange={handleChange}
                checked={formData.gender_identity === "man"}
              />
              <label htmlFor="man-gender-identity">Man</label>
              <input
                id="woman-gender-identity"
                type="radio"
                name="gender_identity"
                value="woman"
                onChange={handleChange}
                checked={formData.gender_identity === "woman"}
              />
              <label htmlFor="woman-gender-identity">Woman</label>
            <label htmlFor="about">About me</label>
            <input
              id="about"
              type="text"
              name="about"
              required={true}
             
              defaultValue={user?.about}
              onChange={handleChange}
              key={formData.about}
            />
            <input type="submit" />
          </section>
        </form>
      </div>
    </>
  );
};

Backend

app.put('/editprofile', async (req, res) => {
    const client = new MongoClient(uri)
    const formData = req.body.formData

    try {
        await client.connect()
        const database = client.db('app-data')
        const users = database.collection('users')

        const query = {user_id: formData.user_id}

        const updateDocument = {
            $set: {
                first_name: formData.first_name,
                gender_identity: formData.gender_identity,
                about: formData.about
            },
        }

        const insertedUser = await users.updateOne(query, updateDocument)

        res.json(insertedUser)

    } finally {
        await client.close()
    }
})