Crud Operation in React Using Web API Core

Problem Defination :- We have a requirement to create CRUD operation in react using WEB API core , In which UI is required to design in react and manipulation of data from the database will be done by Web Api.
We consumed developed web api into the react application and perform the operations. Below is the images attached for your references so that you can better understand the articles need.

Employee Manipulation Form: React CRUD app with an employee table

As you can see in the above image , I have designed a UI in by which we can add the employee data as well as Edit and delete the employee data. Here I have it in details using the code and images so that you can refer it and be able to perform crud operations and you will also able to learn how to consume api's in reactapplication.

In the below image i have shown the import components that is used in creating the react application. Create a folder inside the Src folder and named it components where we have to create all the components for our application to use.

Here I have created a component with name CRUDbyAPI and import the below packages inside it as shown in below code snippet.

                    
import React,{useState,useEffect, Fragment} from "react";
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css'
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import axios from "axios";
import { ToastContainer,toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css'

Import statements for React Bootstrap, axios and react-toastify

Now create a function using the same component name and write down the below code as specified into images so that you can easily understand the code in details.

React CRUD component function declaration

In the above image we have used the hooks to manage the data state so you can copy the same hooks or write by your own.

                    
 //Modal Pop up consts
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    //Use for Save the data
    const [name,setName]=useState('');
    const [salary,setSalary]=useState('');
    const [isaccountlocked,setIsAccountLocked]=useState(0);
    //Use for Edit the data
    const [editname,setEditName]=useState('');
    const [editsalary,setEditSalary]=useState('');
    const [editisaccountlocked,setEditIsAccountLocked]=useState('');
    const [editid,setEditId]=useState('');
    const [data,setData]=useState([]);

In the below image I have consumed an API using the axios so that we need to install the axios first then import it into the component , you can install axios by the command npm install axios i .

useState hooks and axios call loading employees from the Web API

In the above image I have use axios.get for calling an web api and consuming the response by the getdata() function and handleEdit function is used for getting the specific record based on id for edit purpose. handleDelete() function is used for deleting the record using the web api as you can see in below image.

getData, handleEdit and handleDelete functions calling the Web API

handleUpdate and handleSave is used for update and save the data into the database using the api's.

handleUpdate function sending the edited employee to the Web API

handleSave function posting a new employee with axios and the clear function

JSX for the employee input form and table header

JSX for the employee table rows and edit modal

                    
   useEffect(()=>
    {
        // setData(empdata);
        getData();
    },[])

    const getData=()=>
    {
        axios.get('http://localhost:5172/api/Employee')
        .then((result)=>{
            setData(result.data)
        })
        .catch((error)=>{
            console.log(error);
        })
    }
    const handleEdit=(id)=>
    {
        // alert(id);
        handleShow();
        axios.get(`http://localhost:5172/api/Employee/id?id=${id}`)
        .then((result)=>{
            setEditId(result.data.id);
            setEditName(result.data.name);
            setEditSalary(result.data.salary);
            setEditIsAccountLocked(result.data.isAccountLocked);
        })
    }
    const handleDelete =(id)=>
    {
        if(window.confirm('Are you sure you want to delete the employee') ==true)
        {
           axios.delete(`http://localhost:5172/api/Employee/${id}`)
           .then((result)=>{
            if(result.status===200)
            {
                toast.success('Employee has been deleted');
                getData();
            }
           }).catch((error)=>{
            console.log(error);
           })
        }       
    }
    const handleUpdate=()=>
    {
        const url=`http://localhost:5172/api/Employee/${editid}`;
        const data={
            "name": editname,
            "salary": editsalary,
            "isAccountLocked": editisaccountlocked,
            "id":editid
        } 
        axios.put(url,data)
        .then((result)=>{
            handleClose();
            getData();
            clear();
            toast.success('Employee updated successfully');
        }).catch((error)=>{
            toast.error(error);
        })   
    }
    const handleSave=()=>
    {
        const url='http://localhost:5172/api/Employee';
            const data=
            {

                "name": name,
                "salary": salary,
                "isAccountLocked": isaccountlocked
            }      
        axios.post(url,data).then((result)=>{
            getData();
            clear();
            toast.success('Employee has been added');
        })
    }
    const clear =()=>{
        setName('');
        setSalary('');
        setIsAccountLocked(0);
        setEditId('');
        setEditIsAccountLocked(0);
        setEditName('');
        setEditSalary('');
    }
    const handleActiveChanged=(e)=>
    {
        if(e.target.checked)
        {
            setIsAccountLocked(1);
        }
        else
        {
            setIsAccountLocked(0);
        }
    }
    const handleEditActiveChanged=(e)=>
    {
        if(e.target.checked)
        {
            setEditIsAccountLocked(1);
        }
        else
        {
            setEditIsAccountLocked(0);
        }
    }

Below is the output of the above code , I have attached only react code and I have not attached the html and UI code you can refer it from above images.

Entering a new employee in the React form

Employee has been added toast message and updated employee table

Edit/Update Employee modal in the React CRUD app

Confirmation dialog before deleting an employee

Crud Operation in React Using Web API Core

Recent Posts