API - JSON Server -

How to delete (api-crud) data in json server at react js

November 29, 2023

 To delete data in a JSON Server from a React.js application, you can use the fetch API or axios to send a DELETE request. Below is a step-by-step guide:

Steps to Delete Data in JSON Server from React.js

  1. Run JSON Server (if not already running)

    npx json-server --watch db.json --port 5000
  2. Ensure your db.json file has some data like
    {
      "users": [
        { "id": 1, "name": "John Doe" },
        { "id": 2, "name": "Jane Doe" },
        {"id":3,"name":"react js"},
        {"id":4,"name":"ajs js"},
        {"id":5,"name":"njs"}
       
      ]
    }
Method 1: Using Fetch API

import React, { useState, useEffect } from "react";

const UsersList = () => {
  const [users, setUsers] = useState([]);

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

  const fetchUsers = async () => {
    const response = await fetch("http://localhost:5000/users");
    const data = await response.json();
    setUsers(data);
  };

  const deleteUser = async (id) => {
    await fetch(`http://localhost:5000/users/${id}`, {
      method: "DELETE",
    });

    setUsers(users.filter((user) => user.id !== id));
  };

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}{" "}
            <button onClick={() => deleteUser(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UsersList;