Scribd
Upload
1 views

CURD_Operations_using_reactjs_usingdatabase

The document provides code examples for a React application that interacts with a local database using axios for CRUD operations. It includes components for fetching data, searching, adding, updating, and deleting records, as well as a simple To-Do list feature. The database is set up using json-server, and the data structure is defined with fields like id, name, salary, technology, and address.

Uploaded by

nagarajakumaritittu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

CURD_Operations_using_reactjs_usingdatabase

The document provides code examples for a React application that interacts with a local database using axios for CRUD operations. It includes components for fetching data, searching, adding, updating, and deleting records, as well as a simple To-Do list feature. The database is set up using json-server, and the data structure is defined with fields like id, name, salary, technology, and address.

Uploaded by

nagarajakumaritittu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Fething API:

1).fecthing the data from my own database and fetching the data using axios and
displaying in the form table.
import axios from 'axios';
import React, { useEffect, useState } from 'react';
const Fetch = () => {
let [s,sets]=useState([]);
let fapi=()=>{
let x=axios.get('http://localhost:3000/data').then((res)=>{
console.log(x);
sets(res.data);

});
}
let FetchAPI=useEffect(()=>{
fapi();
},[]);

return (
<div>

<table style={{border:"2px solid"}}>


<thead>
<th>id</th>
<th>name</th>
<th>sal</th>
<th>tech</th>
<th>address</th>
</thead>
<tbody>
{
s.map((d,i)=>{
return (

<tr key={i}>
<td>{d.id}</td>
<td>{d.name}</td>
<td>{d.sal}</td>
<td>{d.tech}</td>
<td>{d.address}</td>
<td><button>Delete</button></td>
<td><button>Update</button></td>
</tr>
)
})

}
</tbody>
</table>
</div>
)
}

export default Fetch;


DATABASE
1. database is must be in superate folder database ;
2. cd database
3. in order to run the database Commad is json-server database-name.
Database Created by me:
{
"data":[
{
"id":1,
"name":"Raji",
"sal":1000,
"tech":"webtech",
"address":"hydrabad"
},
{
"id":2,
"name":"Kumari",
"sal":2000,
"tech":"Sql",
"address":"Guntur"
},
{
"id":3,
"name":"Jyothi",
"sal":1500,
"tech":"Java",
"address":"Pune"
},
{
"id":4,
"name":"Siva",
"sal":1860,
"tech":".Net",
"address":"Odhissa"
},
{
"id":5,
"name":"Raja Kumar",
"sal":3900,
"tech":"Fullstack",
"address":"Chennai"
}
]
}.
2.Searchin the data by using my own database:
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Search = () => {


let [s1,sets1]=useState([]);
let [inp,setinp]=useState("");
let[f1,setf1]=useState([]);
let fetch=()=>{
let x=axios.get('http://localhost:3000/data').then((res)=>{
console.log(x);
console.log(res.data);
sets1(res.data);
setf1(res.data);
});
}
let fetchApi=useEffect(()=>{
fetch();
},[])
let handlesearch=()=>{
let result=s1.filter((item)=>{
return (
item.sal===Number(inp)
||
item.name.toLowerCase().includes(inp.toLowerCase())
)
})
setf1(result);
}
return (
<div>
<input type="text" value={inp} onChange={(e)=>{setinp(e.target.value)}}></input>
<button onClick={handlesearch}>Search</button>
<table>
<thead>
<th>Id</th>
<th>Name</th>
<th>Sal</th>
<th>Tech</th>
<th>Operations(delete /update)</th>
</thead>
<tbody>
{
f1.map((data)=>{
return(
<tr>
<td>{data.id}</td>
<td>{data.name}</td>
<td>{data.sal}</td>
<td>{data.tech}</td>
<td><button>Delete</button><button>Update</button></td>
</tr>)
})
}
</tbody>
</table>
</div>
)
}
export default Search;
3.CURD OPERATIONS:
1.Add and Update operations:
1).In order to add the data to database we can use the post() method:
2).IN order to update the data we can use the put() and re-intialization of every state
like name,sal,address and id.
Code:
import axios from 'axios';
import React, { useEffect, useState } from 'react';
const Update = () => {
let [s1,sets1]=useState([]);
let[inp1,setinp1]=useState("");
let[update,setupdate]=useState(null);
let[sal,setsal]=useState("");
let[address,setaddress]=useState("");
let fetch=()=>{
let x=axios.get('http://localhost:3000/data').then((res)=>
{
console.log(res.data);
sets1(res.data);
})}
useEffect(()=>{
fetch();
},[]);
let handleAdd=(i)=>{
if(!inp1 || !sal|| !address){
alert("please enter name");
return ;
}
if(update !==null){
const updatedobject={id:update,name:inp1,sal:sal,address:address};
axios.put(`http://localhost:3000/data/${update}`,updatedobject).then((res)=>{
sets1((prev)=>prev.map((item)=>item.id===update?updatedobject:item));
})

setupdate(null);
}
else{
const newObject={
id:s1.length+1,
name:inp1,
sal:sal,
address:address
}
axios.post('http://localhost:3000/data',newObject);
sets1((prev)=>[...prev,newObject]);
setinp1("");
}
}
let handledelete=(id)=>{
axios.delete(`http://localhost:3000/data/${id}`).then((res)=>{
sets1((e)=>e.filter((data)=>data.id !==id));
});
}
let handleUpdate=(id)=>{
const findobject=s1.find((item)=>item.id===id);
setinp1(findobject.name);
setsal(findobject.sal);
setaddress(findobject.address);
setupdate(findobject.id);
}
return (
<div>
<input type="text" value={inp1}
onChange={(e)=>setinp1(e.target.value)}></input>
<input type="text" value={sal} onChange={(e)=>setsal(e.target.value)}></input>
<input type="text" value={address}
onChange={(e)=>setaddress(e.target.value)}></input>
<button onClick={handleAdd}>Add</button>
<table>
<thead>
<th>id</th>
<th>name</th>
<th>sal</th>
<th>address</th>
<th>operatios</th>
</thead>
<tbody>
{
s1.map((data,i)=>{
return (
<tr>
<td>{data.id}</td>
<td>{data.name}</td>
<td>{data.sal}</td>
<td>{data.address}</td>
<td><button onClick={()=>handledelete(data.id)}>delete</button>
<button onClick={()=>handleUpdate(data.id)}>update</button></td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
export default Update;
3.FOR Delete operation:
import React, { useEffect } from 'react';
import { useState } from 'react';
import axios from 'axios';

const Delete = () => {


let [s1,sets1]=useState([]);
let fetch=()=>{
let x=axios.get("http://localhost:3000/data").then((res)=>{
console.log(x);
console.log(res.data);
sets1(res.data);
});
}
useEffect(()=>{
fetch();
},[]);
let handleDelete=(id)=>{
// sets1((e)=>e.filter((item)=>item.id!==id));//for using normal delete operation
//from UI,but not from database in order to delete from database we have to use
the axios.delete('');
axios.delete(`http://localhost:3000/data/${id}`).then((res)=>{
sets1((e)=>e.filter((item)=>item.id !==id))
});

};//for deleteing data from database


return (

<div>
<table>
<thead>
<th>id</th>
<th>name</th>
<th>sal</th>
<th>addres</th>
<th>operations</th>
</thead>
<tbody>
{
s1.map(({id,name,sal,address})=>{
return (
<tr key={id}>
<td>{id}</td>
<td>{name}</td>
<td>{sal}</td>
<td>{address}</td>
<td><button onClick={()=>handleDelete(id)}>delete</button>
<button>Update</button></td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
export default Delete;
4.TO-Do List Mini Priject:
import React, { useState } from 'react';
const Todo = () => {
let [s,sets]=useState("");
let [p,setp]=useState([]);
let [edit,setedit]=useState(null);
let h1=(e)=>{
sets(e.target.value);
}
let h2=()=>{
if(s.trim() !==""){
if(edit !==null){
setp((prev)=>
prev.map((task,i)=>(i===edit)? s:task));
setedit(null);
}
else{
setp((e)=>[...e,s]);
}
sets("")}
}
let handledelete=(index)=>{
console.log(index);
setp((e)=>e.filter((_,i)=>i!==index))
}
let handleEdit=(index)=>{
sets(p[index]);
setedit(index);
}
return (
<div>
<input type="text" value={s} onChange={h1}></input>
<button onClick={h2}>{(edit !==null)?"Update":"Add"}</button>
<br/>
{
p.map((p,i)=>{
return <h1 key={i} id="h1">Todays task {i+1} is :{p}
<button style={{margin:"0 10px"}} onClick={()=>handleEdit(i)}>Update</button>
<button style={{margin:"0 10px"}}
onClick={()=>{handledelete(i)}}>Delete</button></h1>
})
}
</div>
)
}
export default Todo;

You might also like