React Js Show/load Data in Edit Form | Update Data by Id using API

    const { useState, useEffect } = React;

​

    function UserItem({ user, onEdit }) {

      return (

        <div className="user-item">

          <p className="user-name">Name: {user.name}</p>

          <p className="user-email">Email: {user.email}</p>

          <button className="edit-button" onClick={() => onEdit(user)}>Edit</button>

        </div>

      );

    }

​

    function EditModal({ isOpen, user, onClose, onSave }) {

      const [formData, setFormData] = useState({}); // Reset the form data when the user prop changes

​

      useEffect(() => {

        setFormData({ ...user }); // Update form data when the user prop changes

      }, [user]);

​

      const handleChange = (e) => {

        setFormData({

          ...formData,

          [e.target.id]: e.target.value,

        });

      };

​

      const handleSubmit = (e) => {

        e.preventDefault();

        onSave(formData);

      };

​

      return isOpen ? (

        <div className="modal">

          <div className="modal-content">

            <h2>Edit User</h2>

            <form onSubmit={handleSubmit}>

              <label htmlFor="name">Name</label>

              <input

                type="text"

                id="name"

                value={formData.name || ''}

                onChange={handleChange}

                className="input-field"

              />

​

              <label htmlFor="email">Email</label>

              <input

                type="email"

                id="email"

                value={formData.email || ''}

                onChange={handleChange}

                className="input-field"

              />

​

              {/* Add other form fields here */}

​

              <div className="button-container">

                <button type="submit" className="save-button">

                  Save

                </button>

                <button onClick={onClose} className="close-button">

                  Close

                </button>

              </div>

            </form>

          </div>

        </div>

      ) : null;

    }

​

    function App() {

      const [users, setUsers] = useState([]);

      const [editModalOpen, setEditModalOpen] = useState(false);

      const [selectedUser, setSelectedUser] = useState(null);

​

      useEffect(() => {

        const fetchDatabaseRecord = async () => {

          try {

            const response = await axios.get('https://jsonplaceholder.typicode.com/users');

            setUsers(response.data);

          } catch (error) {

            console.error('Error fetching database record:', error);

          }

        };

​

        fetchDatabaseRecord();

      }, []);

​

      const handleEditClick = (user) => {

        setSelectedUser(user);

        setEditModalOpen(true);

      };

​

      const handleCloseModal = () => {

        setEditModalOpen(false);

      };

​

      const handleSaveUser = (updatedUser) => {

        // Perform form submission or API call to save the updated user details

        // Here, you can use the `updatedUser` object to send the updated data to the server

        console.log(updatedUser);

        setEditModalOpen(false);

      };

​

      return (

        <div className="app-container">

          <h3>React Js Show/load Data in Edit Form in reactJS</h3>

          <div>

            {users.map((user) => (

              <UserItem key={user.id} user={user} onEdit={handleEditClick} />

            ))}

          </div>

          {selectedUser && (

            <EditModal

              key={selectedUser.id} // Add a unique key to the modal

              isOpen={editModalOpen}

              user={selectedUser}

              onClose={handleCloseModal}

              onSave={handleSaveUser}

            />

          )}

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>