CRUD Operations With Fake APIs In React

Introduction

In this article, we are going to demonstrate CRUD operations using JSON server mock APIs in react.

In this series, we are learning about basic react js concepts. This article is about how to perform CRUD operations in react with mock APIs. In the previous article, we created the form and add basic validations.

Forms And Basic Validations In React

Let's get started. As I mentioned we are using the JSON server so first we have to install it by the below command.

npm install -g json-server

CRUD Operations With Fake APIs In React

Once the JSON server is installed successfully on your machine. We need to create one JSON file name suppose db.json in react application folder, you can create any other directory as well and add some dummy data in that file.

db.json

{
  "Users": [
    {
      "id": 1,
      "name": "John",
      "country": "India",
      "comment": "I am John",
      "tandc": true
    },
    {
      "id": 2,
      "name": "Andy",
      "country": "US",
      "comment": "This is Andy",
      "tandc": true
    },
    {
      "id": 3,
      "name": "Rozer",
      "country": "India",
      "comment": "I am Rozer",
      "tandc": true
    },
    {
      "id": 4,
      "name": "Daniel",
      "country": "US",
      "comment": "I am Daniel",
      "tandc": true
    },
    {
      "id": "5",
      "name": "Roy",
      "country": "India",
      "comment": "I am Roy",
      "tandc": true
    }
  ]
}

We have added some data to the JSON file. Now just run the below command to see our API running. We have run it on port 8080 as 3000 already we are using for react application.

json-server --watch db.json --port 8080

CRUD Operations With Fake APIs In React

As we can see APIs working as expected, Now we have created a registration component and added the below code. Here we are calling our APIs by the fetch method and making the calls for CRUD operations. We are using use effect hook and call our get method inside this hook. We are using the map method to iterate the data.

Registration.js

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

function Registration() {
  const [data, setdata] = useState([])
  const [id, setid] = useState("")
  const [name, setname] = useState("")
  const [country, setcountry] = useState("")
  const [comment, setcomment] = useState("")
  const [tandc, settandc] = useState(false)

  const [reqId, setreqId] = useState("")
  const [reqName, setreqName] = useState("")
  const [reqCountry, setreqCountry] = useState("")
  const [reqComment, setreqComment] = useState("")
  const [reqTandc, setreqTandc] = useState("")
  const [btnText, setbtnText] = useState("Submit")

  useEffect(() => {
    getData();
  }, [])
  const getData = () => {
    fetch("http://localhost:8080/Users").then((response) => response.json())
      .then((result) => {
        setdata(result)
      })
  }
  const submit = (e) => {
    e.preventDefault();
    resetErrorMessage();
    if (Validate()) {
      if (btnText === "Submit") {
        fetch('http://localhost:8080/Users/', {
          method: 'POST',
          body: JSON.stringify({
            id: id,
            name: name,
            country: country,
            comment: comment,
            tandc: tandc
          }),
          headers: {
            'Content-type': 'application/json',
          },
        }).then((response) => response.json()).then((result) => {
          alert("Record inserted")
          getData()
          resetform();
          resetErrorMessage();
        })
      }
      else {
        fetch('http://localhost:8080/Users/' + id, {
          method: 'PUT',
          body: JSON.stringify({
            name: name,
            country: country,
            comment: comment,
            tandc: tandc
          }),
          headers: {
            'Content-type': 'application/json',
          },
        }).then((response) => response.json()).then((result) => {
          alert("Record updated")
          getData()
          resetform();
          resetErrorMessage();
        })
      }
    }
    // console.log(name,country,comment,tandc)
  }
  const Validate = () => {
    if (id.trim() === "") setreqId("required")
    else if (name.trim() === "") setreqName("required")
    else if (country.trim() === "") setreqCountry("required")
    else if (comment.trim() === "") setreqComment("required")
    else if (tandc === false) setreqTandc("required")
    else return true
  }
  const resetErrorMessage = () => {
    setreqId(""); setreqName(""); setreqCountry(""); setreqComment(""); setreqTandc("");
  }
  const resetform = () => {
    setid(""); setname(""); setcountry(""); setcomment(""); settandc(false); setbtnText("Submit");
  }
  const deleterecord = (id) => {
    fetch("http://localhost:8080/Users/" + id, { method: 'DELETE' }).then((response) => response.json())
      .then((result) => {
        alert("Record deleted")
        getData()
      })
  }
  const editrecord = (item) => {
    setid(item.id)
    setname(item.name)
    setcountry(item.country)
    setcomment(item.comment)
    settandc(item.tandc)
    setbtnText("Update")
  }

  return (
    <div>
      <h1 style={{ color: 'red' }}> CRUD Operation With Json Server</h1>
      <div style={{ width: '40%', float: 'left', marginLeft: '60px' }}>
        <form onSubmit={submit}>
          <table className="users-table">
            <tbody>
              <tr>
                <th colSpan="2"><center>User Registration Form</center></th>
              </tr>
              <tr>
                <td><b>Id</b></td>
                <td>
                  <input type="text" value={id} name="id" onChange={(e) => setid(e.target.value)} />
                  <br />
                  {reqId === "required" && <span className="txt-red">Please enter id</span>}
                </td>
              </tr>
              <tr>
                <td> <b> Name</b></td>
                <td>
                  <input type="text" value={name} name="name" onChange={(e) => setname(e.target.value)} />
                  <br />
                  {reqName === "required" && <span className="txt-red">Please enter name</span>}
                </td>
              </tr>
              <tr>
                <td> <b>Country</b> </td>
                <td>
                  <select name="country" value={country} onChange={(e) => setcountry(e.target.value)}>
                    <option value="">-----------Select------------</option>
                    <option value="India">India</option>
                    <option value="US">US</option>
                  </select>
                  <br />
                  {reqCountry === "required" && <span className="txt-red">Please select country</span>}
                </td>
              </tr>
              <tr>
                <td> <b>Comment</b> </td>
                <td>
                  <textarea value={comment} name="comment" onChange={(e) => setcomment(e.target.value)}></textarea>
                  <br />
                  {reqComment === "required" && <span className="txt-red">Please enter comment</span>}
                </td>
              </tr>
              <tr>
                <td colSpan="2">
                  <input type="checkbox" checked={tandc} name="tandc" onChange={(e) => settandc(e.target.checked)} /> <b> Term & condition </b>
                  <br />
                  {reqTandc === "required" && <span className="txt-red">Please check term & condition</span>}
                </td>
              </tr>
              <tr>
                <td colSpan="2">
                  <input type="submit" value={btnText} />
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
      <div style={{ width: '40%', float: 'right', marginRight: '80px' }}>
        <table className="users-table">
          <tbody>
            <tr>
              <th>Id </th>
              <th>Name </th>
              <th>Country</th>
              <th>Comment</th>
              <th>Term & Condition</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
            {data ? data.map((item, index) =>
              <tr key={index}>
                <td>{item.id} </td>
                <td>{item.name} </td>
                <td>{item.country}</td>
                <td> {item.comment}</td>
                <td>{item.tandc + ""}</td>
                <td><button onClick={(e) => { editrecord(item) }}>Edit</button> </td>
                <td> <button onClick={(e) => { deleterecord(item.id) }}>Delete</button> </td>

              </tr>
            ) : null}
          </tbody>
        </table>
      </div>
    </div>
  )
}
export default Registration;

Now we just import the registration component into the App component.

App.js

import './App.css';
import Registration from './Registration'

function App() {
  return (
    <div className="App">
      <Registration /> 
    </div>
  );
}

export default App;

We have added the below CSS for styling our page into the App CSS file.

App.css

.users-table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.users-table td, .customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

.users-table tr:nth-child(even){background-color: #f2f2f2;}

.users-table tr:hover {background-color: #ddd;}

.users-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;  
}

.txt-red{
color: red;
}

We have done all the required changes. Now just run the application with the npm start command and we can see the below output and are able to perform CRUD operations with the JSON server.

CRUD Operations With Fake APIs In React

Summary

In this article, We have learned how to perform CRUD operations in react with mock APIs. I hope you understand form creation and use basic validation in react. Thank you for reading this article.