AXIOS Semua metode
import React, { useEffect, useState } from 'react'
import axios from 'axios';
const Dashboard = () => {
const [api, setapi] = useState([]);
const [flag, setflag] = useState(true);
const show = async () => {
const res = await axios.get(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article`)
setapi(res.data)
console.log(api);
}
const dele = async (id) => {
await axios.delete(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article/${id}`)
setflag(!flag)
}
const additem = async()=>{
const value = prompt("Enter the new value")
const titleValue = prompt("Enter the add Title value")
const article ={"name":value,"title":titleValue}
await axios.post(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article`,article)
setflag(!flag)
}
const udate= async(id)=>{
const data = prompt("Enter the data you wanna update")
const title = prompt("Enter the title you wanna update")
await axios.put(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article/${id}`,{"name":data,"title":title})
setflag(!flag)
}
useEffect(() => {
show()
}, [flag]);
useEffect(() => {
show()
// additem()
}, []);
return (
<>
<button className='btn btn-primary mr-2' onClick={additem} >Add
</button>
{/* <h1>hello</h1>
<button onClick={getdata}>click me</button> */}
<table className="table">
<thead>
<tr>
<th scope="col">User id</th>
<th scope="col">Name</th>
<th scope="col">Title</th>
</tr>
</thead>
{api.map((val) => {
return (<>
<tbody>
<tr>
<td>{val._id}</td>
<td>{val.name}</td>
<td>{val.title}</td>
<td>
<button className='btn btn-primary' onClick={()=>udate(val._id)} >edit
</button>
<button className='btn btn-danger ml-2' onClick={()=>dele(val._id)}>delete</button>
</td>
</tr>
</tbody>
</>)
})}
</table>
</>
)
}
export default Dashboard
30_Savaliya Denish
