Failing to populate a react form with data from Database despite having done everything as instructed
Tags: react, springboot
Published: 2023-11-13 11:14:15

0

I am failing to populate a react form with data from database using the set Method, but when I do console.log(res.data) I can see the data fetched successfully. I have followed all the tutorials exactly word by word but it is just not working. I am also getting the warning: "Line 24:6: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps". And Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. My code is as below:

import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import UsersService from "../../services/UsersService";

const EditUser = () => {
  const { id } = useParams();

  const [user, setUser] = useState({
    username: "",
    password: "",
  });

  const navigate = useNavigate();

  useEffect(() => {
    UsersService.findUserById(id)
      .then((res) => {
        console.log(res.data);
        setUser(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const userUpdate = (e) => {
    e.preventDefault();
    UsersService.updateUser(user)
      .then((res) => {
        navigate("/");
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <>
      <div className="container mt-3">
        <div className="row">
          <div className="col-md-6 offset-md-3">
            <div className="card">
              <div className="card-header fs-3 text-center">Edit User</div>
              <div className="card-body">
                <form onSubmit={(e) => userUpdate(e)}>
                  <div className="mb-3">
                    <label className="form-label">ID</label>
                    <input
                      className="form-control"
                      type="text"
                      name="id"
                      id="id"
                      value={id}
                      disabled
                    />
                  </div>
                  <div className="mb-3">
                    <label>Username</label>
                    <input
                      type="text"
                      id="username"
                      name="username"
                      className="form-control"
                      value={user.username}
                      onChange={(e) => handleChange(e)}
                    />
                  </div>

                  <div className="mb-3">
                    <label>Password</label>
                    <input
                      type="text"
                      id="password"
                      name="password"
                      className="form-control"
                      value={user.password}
                      onChange={(e) => handleChange(e)}
                    />
                  </div>
                  <button className="btn btn-primary col-md-12">Update</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default EditUser;