In this article, we will learn about CRUD operations using Axios in react. here Axios allows us to communicate with APIs easily in our react apps.
First, we have to install the Axios npm module in react project like the below code.
npm i axios
Axios give 4 methods which are GET, POST, PUT and DELETE.
here, GET is the method used for fetching data from the API. POST method is used to add new data. The PUT method is used for updating your API data. DELETE method is used for deleting data from API.
How to call API with Axios is given by below code.
App.js
import React, { useEffect, useState } from 'react';
import './App.css';
import Post from './components/post'
function App() {
return (
<div style={{ margin: '0px 50px 0px 50px' }}>
<Post />
</div>
);
}
export default App;
Post.js
import React, { useEffect, useState } from 'react'
import { Input, Button, Row, Col } from 'reactstrap'
import DataTable from './dataTable'
import axios from "axios"
export default function Post() {
const [post, setPost] = useState([])
const [selectPost, setSelectPost] = useState([])
const [data, setData] = useState({
title: "",
body: ""
})
const [msg, setMsg] = useState('')
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
setPost(response.data);
})
}, [])
const addPost = () => {
console.log("data", data)
const postData = {
userId: (post.length + 1),
id: (post.length + 1),
title: data.title,
body: data.body
}
axios.post('https://jsonplaceholder.typicode.com/posts', postData)
.then((response) => {
console.log("successfully add")
setData({
title: "",
body: ""
})
setMsg("Add successfully")
}).catch(() => {
setMsg("error")
})
}
const editPost = () => {
console.log("data", data)
const postData = {
userId: (post.length + 1),
id: (post.length + 1),
title: data.title,
body: data.body
}
axios.put(`https://jsonplaceholder.typicode.com/posts/${selectPost.id}`, postData)
.then((response) => {
console.log("successfully add")
setData({
title: "",
body: ""
})
setMsg("Edit successfully")
}).catch(() => {
setMsg("error")
})
}
const deletePost = () => {
axios.delete(`https://jsonplaceholder.typicode.com/posts/${selectPost.id}`)
.then((response) => {
console.log("successfully add")
setData({
title: "",
body: ""
})
setMsg("delete successfully")
}).catch(() => {
setMsg("error")
})
}
useEffect(() => {
setData({
title: selectPost ? selectPost.title : "",
body: selectPost ? selectPost.body : ""
})
}, [selectPost])
return (
<>
<Row>
<h3>Add Post</h3>
<Col>
<Input
autoComplete="off"
autoFocus
type='textarea'
id="title"
placeholder='title'
value={data.title}
onChange={(e) => setData({ ...data, title: e.target.value, })}
className={'post-title'}
/>
</Col>
<Col>
<Input
autoComplete="off"
autoFocus
type='textarea'
id="body"
value={data.body}
placeholder='body'
onChange={(e) => setData({ ...data, body: e.target.value })}
className={'post-body'}
/>
</Col>
<Col>
<Button className="post-button" onClick={() => addPost()}>Add Post</Button>
<Button className="post-button" onClick={() => editPost()}>Edit Post</Button>
<Button className="post-button" onClick={() => deletePost()}>Delete Post</Button>
</Col>
<Col>
<h3>{msg}</h3>
</Col>
</Row>
{post.length !== 0 ? <DataTable posts={post} setSelectPost={setSelectPost} /> : null}
</>
)
}
Datatable.js
import React, { useState } from 'react'
import DataTable from 'react-data-table-component'
import ReactPaginate from 'react-paginate';
import { CustomInput } from 'reactstrap'
export default function Datatable({ posts, setSelectPost }) {
console.log("postspostspostsposts", posts)
const columns = [
{
name: '',
cell: (row, index) => {
return (<CustomInput
type='radio'
name="post"
id={`post${index}`}
onChange={(e) => setSelectPost(row)}
/>)
},
minWidth: '50px'
},
{
name: 'Id',
minWidth: '40px',
selector: 'userId',
sortable: true,
cell: (row) => row.id
},
{
name: 'Title',
minWidth: '200px',
selector: 'title',
sortable: true,
cell: (row) => row.title
},
{
name: 'Body',
selector: 'body',
minWidth: '120px',
sortable: true,
cell: (row) => row.body
},
]
const [dataArray11, setDataArray11] = useState(posts.slice(0, 10))
const [currentPage, setCurrentPage] = useState(0)
const handlePagination = (page) => {
setCurrentPage(page.selected)
const dataarr = []
for (let index = page.selected * 10; index < (page.selected + 1) * 10; index++) {
dataarr.push(posts[index])
}
setDataArray11(dataarr)
}
const CustomPagination = () => {
return (
<ReactPaginate
pageCount={posts.length / 10}
forcePage={currentPage}
onPageChange={page => handlePagination(page)}
activeClassName='active'
/>
)
}
return (
<DataTable
pagination
responsive
paginationServer
columns={columns}
data={dataArray11}
paginationComponent={CustomPagination}
/>
)
}
Here, in the app.js add a post js file to execute first
In the post.js file, we have to display the post data which is come from API and call using the Axios method
On click add button call POST API and add post data you have to add in textarea. if add the data successfully then it will return a response to success.
On click edit button call PUT API and update with API data which is selected in a data table row. if an update of the data is successfully it will return a response to success otherwise give an error.
On click delete button call DELETE API and delete the data from API which is selected in a data table row. if delete the data successfully it will return a response to success otherwise give an error.
GET API call is give all data from called API and if successful it is returned success message.
You can see below the Axios how can perform.
