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

Get Create Edit Data in React Js using API:In Reactjs, to display and load data in an edit form, you fetch the specific data by ID from an API and populate the form fields with it. Then, users can modify the data and trigger an update function to send the changes back to the API, updating the data. This process involves fetching data, rendering it in the form, handling user input, and making API calls to ensure the data is updated correctly.

written

reviewed

updated

How can I use React.js to display or load data in an edit form and update the data by its ID using an API?

This ReactJS code fetches data from an API, displays a list of users, and allows editing user information. It utilizes Axios to fetch user data from 'https://jsonplaceholder.typicode.com/users'. The UserItem component displays user details and provides an "Edit" button to open an EditModal. The EditModal component is a popup form that allows editing and saving user details. When the form is submitted, the handleSaveUser function is called, which can be used to perform form submission or API call to save the updated user data.

Get Create Edit Data in React Js using API Example

<script type="text/babel">
    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>

Run

React JS Tutorial

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

How can I use React.js to display or load data in an edit form and update the data by its ID using an API?

Get Create Edit Data in React Js using API Example

Output of Get Create Edit Data in React Js using API

React JS Tutorial

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

Feedback for Abhishek

How can I use React.js to display or load data in an edit form and update the data by its ID using an API?

Get Create Edit Data in React Js using API Example

Output of Get Create Edit Data in React Js using API