CRUD operation in React stands for Create, Read, Update, and Delete. CRUD is an important concept for organizing and managing data across the web application. We will perform CRUD operation in the React application with local storage in the form of JavaScript Objects instead of using JSON servers or Axios in React. CRUD operations are referred to as
- Create: Creating a post or adding the table row, adding data to the webpage, or creating content.
- Read: Reading or retrieving data from a web page
- Update: Updating or editing existing content on the webpage
- Delete: Deleting and removing the entry or content/post from the webpage
Approach
To implement CRUD operations in React JS on locally stored data, use a data file array.js and create different components home, create, edit and link them with the data present in the js file. Access the data from the JavaScript Localstorage API . Add routing for these components using react-router-dom ann style using the React-Bootstrap UI components and Bootstrap style classes.
Steps to create the application
Step 1: Let’s start building the Front-end part with React. To create a new React App, enter the following code into the terminal and hit enter.
npx create-react-app crud_app
Step 2: Move into the React project folder.
cd crud_app
Step 3: Install other dependencies using this command
npm i react-bootstrap bootstrap@5.1.3 react-router-dom
Project Structure:

Updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example show CRUD operations on a locally stored data file named array.js using React JS.
Javascript
import React from "react" ;
import {
BrowserRouter as Router,
Route,
Routes,
} from "react-router-dom" ;
import "./App.css" ;
import Create from "./components/Create" ;
import Edit from "./components/Edit" ;
import Home from "./components/Home" ;
function App() {
return (
<div className= "App" >
<h1 className= "geeks" >GeeksforGeeks </h1>
<h3>CRUD App</h3>
<Router>
<Routes>
<Route path= "/" element={<Home />} />
<Route
path= "/create"
element={<Create />}
/>
<Route
path= "/edit"
element={<Edit />}
/>
</Routes>
</Router>
</div>
);
}
export default App;
|
Javascript
const array = [
{
id: "1" ,
Name: "Shivansh" ,
Age: "23" ,
},
{
id: "2" ,
Name: "Simran" ,
Age: "22" ,
},
{
id: "3" ,
Name: "Aakash" ,
Age: "23" ,
},
];
export default array;
|
Javascript
import React, { useState } from "react" ;
import { Button, Form } from "react-bootstrap" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
import array from "./array" ;
import { v4 as uuid } from "uuid" ;
import { Link, useNavigate } from "react-router-dom" ;
function Create() {
const [name, setname] = useState( "" );
const [age, setage] = useState( "" );
let history = useNavigate();
const handelSubmit = (e) => {
e.preventDefault();
const ids = uuid();
let uni = ids.slice(0, 8);
let a = name,
b = age;
if (name == "" || age == "" ) {
alert( "invalid input" );
return ;
}
array.push({ id: uni, Name: a, Age: b });
history( "/" );
};
return (
<div>
<Form
className= "d-grid gap-2"
style={{ margin: "5rem" }}
>
{
}
<Form.Group
className= "mb-3"
controlId= "formBasicName"
>
<Form.Control
onChange={(e) =>
setname(e.target.value)
}
type= "text"
placeholder= "Enter Name"
required
/>
</Form.Group>
{
}
<Form.Group
className= "mb-3"
controlId= "formBasicAge"
>
<Form.Control
onChange={(e) =>
setage(e.target.value)
}
type= "number"
placeholder= "Age"
required
/>
</Form.Group>
{
}
<Button
onClick={(e) => handelSubmit(e)}
variant= "primary"
type= "submit"
>
Submit
</Button>
{ }
<Link className= "d-grid gap-2" to= "/" >
<Button variant= "info" size= "lg" >
Home
</Button>
</Link>
</Form>
</div>
);
}
export default Create;
|
Javascript
import React from "react" ;
import { Button, Table } from "react-bootstrap" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
import array from "./array" ;
import { Link, useNavigate } from "react-router-dom" ;
function Home() {
let history = useNavigate();
function setID(id, name, age) {
localStorage.setItem( "id" , id);
localStorage.setItem( "Name" , name);
localStorage.setItem( "Age" , age);
}
function deleted(id) {
let index = array
.map( function (e) {
return e.id;
})
.indexOf(id);
array.splice(index, 1);
history( "/" );
}
return (
<div style={{ margin: "5rem" }}>
<Table striped bordered hover size= "sm" >
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{
}
{array.map((item) => {
return (
<tr>
<td>{item.Name}</td>
<td>{item.Age}</td>
{
}
<td>
<Link to={`/edit`}>
<Button
onClick={(e) =>
setID(
item.id,
item.Name,
item.Age
)
}
variant= "info"
>
Update
</Button>
</Link>
</td>
{
}
<td>
<Button
onClick={(e) =>
deleted(item.id)
}
variant= "danger"
>
Delete
</Button>
</td>
</tr>
);
})}
</tbody>
</Table>
{
}
<Link className= "d-grid gap-2" to= "/create" >
<Button variant= "warning" size= "lg" >
Create
</Button>
</Link>
</div>
);
}
export default Home;
|
Javascript
import React, { useEffect, useState } from "react" ;
import { Button, Form } from "react-bootstrap" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
import array from "./array" ;
import { Link } from "react-router-dom" ;
import { useNavigate } from "react-router-dom" ;
function Edit() {
const [name, setname] = useState( "" );
const [age, setage] = useState( "" );
const [id, setid] = useState( "" );
let history = useNavigate();
let index = array
.map( function (e) {
return e.id;
})
.indexOf(id);
const handelSubmit = (e) => {
e.preventDefault();
if (name == "" || age == "" ) {
alert( "invalid input" );
return ;
}
let a = array[index];
a.Name = name;
a.Age = age;
history( "/" );
};
useEffect(() => {
setname(localStorage.getItem( "Name" ));
setage(localStorage.getItem( "Age" ));
setid(localStorage.getItem( "id" ));
}, []);
return (
<div>
<Form
className= "d-grid gap-2"
style={{ margin: "5rem" }}
>
{
}
<Form.Group
className= "mb-3"
controlId= "formBasicEmail"
>
<Form.Control
value={name}
onChange={(e) =>
setname(e.target.value)
}
type= "text"
placeholder= "Enter Name"
/>
</Form.Group>
{ }
<Form.Group
className= "mb-3"
controlId= "formBasicPassword"
>
<Form.Control
value={age}
onChange={(e) =>
setage(e.target.value)
}
type= "number"
placeholder= "Age"
/>
</Form.Group>
{
}
<Button
onClick={(e) => handelSubmit(e)}
variant= "primary"
type= "submit"
size= "lg"
>
Update
</Button>
{ }
<Link className= "d-grid gap-2" to= "/" >
<Button variant= "warning" size= "lg" >
Home
</Button>
</Link>
</Form>
</div>
);
}
export default Edit;
|
CSS
.App {
text-align : center ;
}
.geeks {
color : green ;
}
|
Steps to run the application:
Step 1: Use this npm command in project directory to run the applicaion.
npm start
Output: This output will be visible on http://localhost:3000/

The CRUD operations in React JS are performed on Local Storage, for learning CRUD operation with ReactJS and NodeJS please refer to How to build a basic CRUD app with Node.js and ReactJS?
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Oct, 2023
Like Article
Save Article