CRUD operation in React JS using Hooks

In this article, I will show you about CRUD operation in React JS using Hooks and functional components and also will show how to implement it with the fetch() function using rest API. I will show you how to make insert, update, and delete operation functionality in React JS. We will also use the bootstrap and font awesome, using this we can create a beautiful UI for our operation.

In this We will discuses below point

• CRUD operation in React using functional component
• CRUD operation in React JS using Hooks

We can see in the below image that here we have created both HTML tables with delete and edit icons and options for adding a new customer.

OnClick of edit icon It will show a new row from where you can update the customer detail. 

For performing the operation, we need to create a REST that will participate in CRUD operations , we are going to use the below customer API. we are going to create a simple customer page in which we will perform CRUD (Create, Read, Update and Delete) Operation using the below rest API. 

1.GET http://restapi.adequateshop.com/api/Customer

Response:

[
  {
    "id": 121743,
    "name": "dhiraj",
    "email": "ds@gmail.com",
    "location": "IND"
  },
  {
    "id": 121742,
    "name": "anjoo",
    "email": "anu12345678@gmail.com",
    "location": "pune"
  },
  {
    "id": 121741,
    "name": "Mike",
    "email": "AADAD@gmail.com",
    "location": "Paris"
  },
  {
    "id": 121740,
    "name": "Adil",
    "email": "Adil@gmail.com",
    "location": "Lahore"
  },
  {
    "id": 121739,
    "name": "dhiraj",
    "email": "dhiqraLLjj435j@gmail.com",
    "location": "IND"
  },
  {
    "id": 121738,
    "name": "snehal",
    "email": "ahire@gmail.com",
    "location": "sjhadjdwq"
  },
  {
    "id": 121737,
    "name": "dhiraj",
    "email": "dhiraj27@gmail.com",
    "location": "Inda"
  },
  {
    "id": 121736,
    "name": "dhiraj",
    "email": "dhiraj26@gmail.com",
    "location": "Inda"
  },
  {
    "id": 121722,
    "name": "guru",
    "email": "guruswamy789@gmail.com",
    "location": "tirupati"
  },
  {
    "id": 121661,
    "name": "sdasdw",
    "email": "asdadw",
    "location": "qdsadwq"
  },
  {
    "id": 121660,
    "name": "Mike",
    "email": "mike456734@gmail.com",
    "location": "Paris"
  },
  {
    "id": 121659,
    "name": "qdsadsa",
    "email": "wdqdsad",
    "location": "wqdsadwq"
  },
  {
    "id": 121658,
    "name": "sq",
    "email": "sqqwdq",
    "location": "dwqdq"
  },
  {
    "id": 121657,
    "name": "dwdwq",
    "email": "dwqdsad",
    "location": "dsqwqdwq"
  },
  {
    "id": 121656,
    "name": "ascas",
    "email": "sadwqdsa",
    "location": "dwqdsa"
  },
  {
    "id": 121655,
    "name": "abcabcsjk",
    "email": "cbsajkbcsjk",
    "location": "cbsajkcbsa"
  },
  {
    "id": 121654,
    "name": "acbcsbaj",
    "email": "sbahjbscaj",
    "location": "csbhjcsab"
  },
  {
    "id": 121652,
    "name": "qweqwe",
    "email": "qweqwe",
    "location": "dwqdwqsd"
  },
  {
    "id": 121651,
    "name": "asd",
    "email": "asdhwudhu",
    "location": "sjhadjdwq"
  },
  {
    "id": 121650,
    "name": "Dandy",
    "email": "dandy2@fhu",
    "location": "dsjdiwq"
  }
]

2.POST http://restapi.adequateshop.com/api/Customer

Request Parameter

{ 
  "name": "string",
  "email": "string",
  "location": "string"
}

3. PUT http://restapi.adequateshop.com/api/Customer/15624
Request Parameter

{
  "id": 15624,
  "name": "string",
  "email": "string",
  "location": "string"
}

4.DELETE  http://restapi.adequateshop.com/api/Customer/15624
Step 1. CREATE NEW React js PROJECT 

To create a new project, Open the terminal and run the below command.

npx create-react-app crud-app

Step 2. Install bootstrap CSS and font-awesome in our application using the below command for making beautiful UI.

npm install bootstrap –save

npm install –save font-awesome

Step 3. Create React Component in your project

Create a “components” folder inside the src folder in our react js application and add 3 files inside that folder.

• UserAction.js
• CreateCustomer.js
• CustomerList.js

Step 4. Create a Helper class file for calling API 

Create a “httphelpers” folder inside the src folder in our react js application and restAPIHelper.js file inside that folder.

Paste the below code inside that folder

restAPIHelper.js

export const restAPIHelper = () => {
    
    const callAPI = async (endpointurl, options = {}) => {
        const defaultHTTPMethod = "GET"
        const defaultHTTPHeaders = {  //set defaultHeaders of Http request
            "Content-Type": "application/json",
            Accept: "application/json",
        }
        const controller = new AbortController() //using  AbortController to cancel ongoing fetch requests
        options.signal = controller.signal

        options.method = options.method || defaultHTTPMethod

        options.headers = options.headers
            ? { ...defaultHTTPHeaders, ...options.headers }
            : defaultHTTPHeaders

        options.body = JSON.stringify(options.body) || false
        if (!options.body) delete options.body

        setTimeout(() => { // cancel request if it will take more then 5s 
            controller.abort()
        }, 5000)

        try {
            const apiResponse = await fetch(endpointurl, options)
            return await apiResponse.json()
        } catch (err) {
            return err
        }
    }

    //calling get API For fetching data
    const get = (endpointurl, options = {}) => callAPI(endpointurl, options)

    //Post to insert 
    const postCreate = (endpointurl, options) => {
        options.method = "POST"
        return callAPI(endpointurl, options)
    }


    //Put Api calling
    const putUpdate = (endpointurl, options) => {
        options.method = "PUT"
        return callAPI(endpointurl, options)
    }

    //Delete Api calling
    const deletedata = (endpointurl, options) => {
        options.method = "DELETE"
        return callAPI(endpointurl, options)
    }

    return {
        get,
        postCreate,
        putUpdate,
        deletedata,
    }
}

Step 5. Write coding in the file to perform crud operation

UserAction.js

 

import React, { useState, useEffect } from "react"
import CreateAgent from "./CreateCustomer"
import UserList from "./CustomerList"
import 'bootstrap/dist/css/bootstrap.min.css';

import { restAPIHelper } from "../httphelpers/restAPIHelper"

const UserAction = () => {
    const [customers, setcustomers] = useState(null)

    const url = "http://restapi.adequateshop.com/api/Customer"
    const api = restAPIHelper()

    useEffect(() => {
        getCustomers()
    }, [])

    const postCustomer = customer => {
        api
            .postCreate(`${url}`, { body: customer })
            .then(res => getCustomers())
            .catch(err => console.log(err))
    }

    const updateCustomer = (id, customer) => {
        api
            .putUpdate(`${url}/${id}`, { body: customer })
            .then(res => getCustomers())
            .catch(err => console.log(err))
    }

    const deleteCustomer = id => {
        api
            .deletedata(`${url}/${id}`, {})
            .then(res => getCustomers())
            .catch(err => console.log(err))
    }

    const getCustomers = () => {
        api
            .get(`${url}`)
            .then(res => {
                if(res)
                {
                    setcustomers(res)
                }
            })
            .catch(err => console.log(err))
    }
    if (!customers) return null

    return (
        <>
            <h3>Add New Record</h3>
            <table>
                <tbody>
                    <tr>
                    <CreateAgent postCustomer={postCustomer} />
                    </tr>
                </tbody>
            </table>
            
            <div className='container-fluid'>
                <h3>All Tourist</h3>
                <UserList
                    customers={customers}
                    setcustomers={setcustomers}
                    postCustomer={postCustomer}
                    updateCustomer={updateCustomer}
                    deleteCustomer={deleteCustomer}
                />
            </div>
        </>
    )
}

export default UserAction

CustomerList.js

import React from "react"
import CreateCustomer from "./CreateCustomer"
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';

const CustomerList = ({ customers, postCustomer, updateCustomer, deleteCustomer }) => {
    const showHideUpdateRow = id => {
        const form = document.getElementsByClassName(`show-form-${id}`)
        form[0].classList.toggle("hide-form")
    }

    const Row = ({ customer }) => {
        return (
            <>
                <tr>
                    <td>{customer.name}</td>
                    <td>{customer.email}</td>
                    <td>{customer.location}</td>
                    <td>
                        <i className="fa fa-pencil-square fa-2x text-info" onClick={() => showHideUpdateRow(customer.id)}></i>
                        <i className="fa fa-trash fa-2x text-danger" onClick={() => deleteCustomer(customer.id)}></i>    
                    </td>
                </tr>
                <tr className={`hide-form show-form-${customer.id}`}> 
                   <CreateCustomer userData={customer} postCustomer={postCustomer} updateCustomer={updateCustomer} showHideUpdateRow={showHideUpdateRow} />
                </tr>
            </>
        )
    }

    return (
        
            <table className="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Location</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                            {customers && customers.map(u => <Row customer={u} key={u.id} />)}
                   </tbody>
            </table>
        
    )
}

export default CustomerList

CreateCustomer.js

import React, { useState } from "react"
import 'font-awesome/css/font-awesome.min.css';
import { faL } from "@fortawesome/free-solid-svg-icons";


const CreateCustomer= ({ userData = {}, postCustomer, updateCustomer,showHideUpdateRow }) => {
    const [user, setUser] = useState({
        id: userData.id ?? 0,
        name: userData.name ?? "",
        email: userData.email ?? "",
        location: userData.location ?? "",
    })

    const handleValue = e => {
        setUser({ ...user, [e.target.name]: e.target.value })
    }

    const submitUser = e => {
        e.preventDefault()
        debugger;
        if (user.name === "" || user.email === "" || user.location === "") return

        if (userData.id) {
            debugger;
            updateCustomer(userData.id, user)
        } else {
            postCustomer(user)
        }
        setUser({ ...user, "name": "", "email": "", "location": "" })
    }
    const hiderow = e => {
        showHideUpdateRow(userData.id);
    }
    const isAdd = !userData.id ? true : false;
    return (
        <>
            <td>
                <input
                    type='text'
                    name='name'
                    className="form-control"
                    value={user.name}
                    placeholder='Name'
                    onChange={e => handleValue(e)}
                />
            </td>
            <td>
                <input
                    type='email'
                    name='email'
                    className="form-control"
                    value={user.email}
                    placeholder='Email'
                    onChange={e => handleValue(e)}
                />
            </td>
            <td>
                <input
                    type='text'
                    name='location'
                    className="form-control"
                    value={user.location}
                    placeholder='location..'
                    onChange={e => handleValue(e)}
                />
            </td>
            <td>
                {isAdd ?
                    <input
                        className='btn btn-primary btnsubmit'
                        type='submit'
                        value={`${!userData.id ? "Add new user" : "Save user"}`}
                        onClick={submitUser}
                    /> :
                    <i className="fa fa-check fa-2x text-success" onClick={submitUser}></i>
                }
                {isAdd ? "" : <i className="fa fa-times fa-2x text-muted" onClick={hiderow}></i>}
            </td>
        </>
    )
}

export default CreateCustomer

Step 6. Import UserAction.js component in App.js

App.js

import logo from './logo.svg';
import './App.css';
import UserAction from "./components/UserAction"
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div className="container-fluid">
      <main>
                <UserAction />
            </main>
    </div>
  );
}

export default App;

so, everything is done now run npm start command to see the result and perform crud operation.

Respond is a front-end library that is answerable for the UI. It is neither an entire system nor a language. It is an open-source JavaScript library for building the UI (UI) of an application.Respond is explanatory, adaptable, and simple to learn. Respond is kept up with by Facebook and a local area of individual engineers. At present, there is an enormous interest in React.js in the business.

Respond can be utilized for the advancement of single-page applications or versatile applications. For complex applications, React involves extra libraries for state the board, steering, and cooperation with an API.

Respond permits us to form complex UIs by composing a little piece of code. A secluded piece of code is called Component.

Essentials of React

You ought to know about HTML, CSS, and JavaScript essentials.You ought to likewise know about ES6.

The post React Js- Fetch data from API on button click appeared first on Software Development | Programming Tutorials.