When you are working at a client-side application then you need to submit the data to the server-side. Here the term API comes to make an easy communication between the client-side application and the server-side. The API helps to send and receive the data from both applications. You already know React JS is used for creating the SPA (single-page application). So, how the React JS communicate from the server-side application? React JS doesn’t support the feature of server-side applications. React JS sends the Ajax request to send and receive the data through the API. There are different libraries or methods available to handle the Ajax request in React JS. One of the most popular packages is Axios. In this post, we will see the usage of Axios in React JS for API request handling. Axios is the npm package and it needs to install to use it.
So, we have already seen the form handling and validation in React JS. Now, in this post, I will show the HTTP requests handling such as-
- GET
- POST
- PUT
- PATCH
- DELETE
What is Axios?
Axios is an external library that is used to handle HTTP requests. This is a promise-based HTTP client available for node.js and the browser. You can run it in the browser and nodejs with the same codebase. While running it on the server-side it uses the native node.js http module. But on the client-side (browser) it uses XMLHttpRequests. That is an Ajax request.
Why Axios?
Axios is know for its features and popularity. Here are the features of using Axios library-
- It makes XMLHttpRequests from the browser at the client-side.
- It can make HTTP requests from node.js on the server-side.
- Also, it supports the Promise API.
- Helps to intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client-side support for protecting against XSRF
Brief Overview of React Routing Using React Router DOM
Prerequisites
Before diving to this post, please make sure you are familiar with the below terms.
- React components,
- React DOM,
- Component rendering,
- React Router and
- React State
I am assuming you have already created the React JS application. So, I am not going to create a new application here. I will continue by installing the Axios Library in React JS.
Install Axios Library in React JS
Navigate to the project folder and open the terminal. Here, we will install the Axios using the npm command. Therefore, hit the below command to install it inside your React project.
npm i axiosYou can find the Axios npm package detail on the official website.
Here, for the demonstration, I will use the test API from JSONPlaceholder.
Create a Todo App in React Using Laravel 8 RESTful APIs
Create Component For API Handling Using Axios
I am going to create some new components inside the src/components folder. You need to create the below components.
- Posts.js – For fetching posts using GET request. It will contain action for View, Edit, and Delete post.
- Post.js – To display the single post by clicking on View action..
- AddPost.js – This component will be used for creating a new post and also for updating the post.
After creating the components, let’s navigate to the Posts.js file and implement the GET request to fetch all the posts.
GET Request
At very first inside this component, you will have to import the Axios library. Similar like you import the React from the ‘react’ library.
import axios from 'axios';Axios npm package provides a get() method for the GET request handling. You need to pass the API end-point inside the method. This will return the response in the callback. For the GET request, we have the below endpoint.
https://jsonplaceholder.typicode.com/postsThe endpoint will not take any parameter. In the response, it will return all the posts. So, let’s checkout.
import React, { Component } from 'react';
import axios from 'axios';
export default class Posts extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// GET request
this.fetchPosts();
}
// fetch all post using GET request
fetchPosts = () => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
if(response.status === 200) {
console.log(response.data);
}
})
.catch((error) => {
console.log(error);
})
}
render() {
return (
<h4 className="card-title fw-bold text-center">API Request Handling in React Using Axios </h4>
);
}In the above code, I have created the function fetchPosts(). Created the GET request of API call. In the React life cycle, one of the life cycle method is componentDidMount(). This method calls just after the constructor. Hence, we will call fetchPosts() function inside this life cycle method.
When you will run the application in the browser, you will have the below result.
React Login and Registration App Using Laravel 7 API
Render API Response Data Using Map Function
Now, let’s render the data on the HTML table. So, here we will set the response to the state object and iterate using array.map() function. Let’s see in the below code.
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
export default class Posts extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
message: ''
}
}
componentDidMount() {
// GET request
this.fetchPosts();
}
// fetch all post using GET request
fetchPosts = () => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
if(response.status === 200) {
console.log(response.data);
this.setState({
posts: response.data
});
}
})
.catch((error) => {
console.log(error);
})
}
// delete request
deletePost = (e) => {
axios.delete('https://jsonplaceholder.typicode.com/posts/' + e.target.value)
.then((response) => {
if(response.status === 200) {
console.log(response);
this.setState({
message: 'Success! post deleted'
})
setTimeout(() => {
this.setState({
message: ''
})
}, 2000);
}
})
.catch((error) => {
console.log(error);
})
}
render() {
return (
<div className="container-fluid py-3">
<div className="card">
<div className="card-header">
<h4 className="card-title fw-bold text-center">API Request Handling in React Using Axios </h4>
</div>
<div className="card-body">
<div className="row">
<div className="col-xl-4 col-lg-4 col-sm-4">
<h5 className="fw-bold">GET Request - Fetch Posts</h5>
</div>
<div className="col-xl-4 col-lg-4 col-sm-4">
<span className="text-success"> {this.state.message ? this.state.message : ''} </span>
</div>
<div className="col-xl-4 col-lg-4 col-sm-4 text-end">
<Link to={"/posts/create"} className="btn btn-primary">Create Post</Link>
</div>
</div>
<table className="table table-striped table-bordered my-3">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
this.state.posts.length > 0 ?
this.state.posts.map((post) =>
<tr key={post.id}>
<td> {post.id} </td>
<td> {post.title} </td>
<td> {post.body} </td>
<td> <Link className="btn btn-sm btn-info" to={"/view/"+post.id}>View</Link>
<Link className="btn btn-sm btn-success" to={"/edit/"+post.id}>Edit</Link>
<button onClick={this.deletePost} value={post.id} className="btn btn-sm btn-danger">Delete</button>
</td>
</tr>
) :
<tr>
<td colSpan="4">
<h5 className="text-danger text-center">No post found</h5>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
);
}
}In the above code, I have stored the API response in the state. Then inside the render(), I have returned the HTML table with data.
I have already created the header and navigation bar in the last post. So, I have added one more navigation link in the header menu.
Create Route in React JS
You need to add some route inside the App.js component. Now, the final route will be like this.
import React, { Component } from 'react';
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import Posts from './components/Posts';
import Post from './components/Post';
import NotFound from './components/NotFound';
import AddPost from './components/AddPost';
class App extends Component {
render() {
return (
<Router>
<Header/>
<Switch>
<Route exact path={["/", "/home"]} component={ Home } />
<Route path="/about" component={ About } />
<Route path="/contact" component={ Contact } />
<Route exact path="/posts" component={ Posts } />
<Route path="/posts/create" component={ AddPost } />
<Route path="/view/:id" component={ Post } />
<Route path="/edit/:id" component={ AddPost } />
<Route component={ NotFound } />
</Switch>
</Router>
);
}
}
export default App;Navigate to the browser and see the result.
Now, let’s move to the next step. We will call the another GET request with the parameter.
Create a CRUD App in React.js Using Laravel 7 RESTful API
GET Request with Parameter
When you will click on the action button View, it will navigate to a new route with the current post id. Through the route, I have loaded a new component. In order to fetch the single post, we have already created a separate component (Post.js) for it. Just open it and add the below code.
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
export default class Post extends Component {
constructor(props) {
super(props);
this.state = {
post: []
}
}
componentDidMount() {
// fetch post
axios.get('https://jsonplaceholder.typicode.com/posts/'+this.props.match.params.id)
.then((response) => {
if(response.status === 200) {
console.log(response.data);
this.setState({
post: response.data
});
}
})
.then((error) => {
console.log(error);
})
}
render() {
return(
<div className="container py-4">
<div className="row">
<div className="col-xl-12 text-end">
<Link to={"/posts"} className="btn btn-primary"> Back to Posts</Link>
</div>
</div>
<div className="row my-3">
<div className="col-xl-8 m-auto">
<div className="card shadow">
<div className="card-header">
<h5 className="card-title fw-bold"> Post Detail </h5>
</div>
<div className="card-body">
<div className="form-group py-2">
<label htmlFor="title"> Title </label>
<input type="text" name="title" defaultValue={this.state.post.title} disabled className="form-control"/>
</div>
<div className="form-group py-2">
<label htmlFor="body"> Body </label>
<textarea type="text" rows="5" name="body" defaultValue={this.state.post.body} disabled className="form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}- In the above code, I got the post id through the props that is passed in the React Router.
- After fetching the post id, I have created a GET request using Axios. This time, the endpoint will take one parameter as id. So, that it can return only a single post.
- I stored the response in the state, and through the state I have binded the value with the input.
Now, let’s check the POST request.
Create REST API in Laravel 8 Using JWT Authentication
POST Request
In order to create a new post, you will need to pass the required data as a parameter inside the form data. So, for creating the new post the required fields are title and body. You need to pass these parameters in the form data.
// create new post
createPost = () => {
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: "lorem ipsum post title",
body: "lorem ipsum post body content"
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
}In the developer console, check the network tab. See the response status code. Here it is 201 that means the post has been created. In the request payload, you can check the title and body are passed.
Now switch to the preview or response tab, you will having the response that post is created.
In the next step, we will check the PUT/PATCH Request for updating the post.
How to Create Github Login in Laravel 8 Using Socialite
PUT/PATCH Request
For updating the post, axios provides the PUT and PATCH method. This will take one parameter as id. So, that on the basis of that id it can update the post.
In the data, it will take the form data. So, here, I have passed the title and body which will be updated.
// update post
updatePost = () => {
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
title: "post title updated",
body: "post content updated"
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
}Check the response in the browser.
You can check the updated content in the response of the API.
How to Create Login with Twitter in Laravel 8 Using Socialite
DELETE Request in Axios
For deleting a post, Axios provides the DELETE request. So, here the endpoint will take the id of the post.
// delete request
deletePost = (e) => {
axios.delete('https://jsonplaceholder.typicode.com/posts/' + e.target.value)
.then((response) => {
if(response.status === 200) {
console.log(response);
this.setState({
message: 'Success! post deleted'
})
setTimeout(() => {
this.setState({
message: ''
})
}, 2000);
}
})
.catch((error) => {
console.log(error);
})
}Now, let’s check the POST and PUT request with the form.
POST and PUT/PATCH Request with Form
Now, let’s try it by submitting the data through the form. So, here we have the AddPost.js component. I will be using the same component for creating and updating the post. This component will have a form and we will submit the form.
When you will click on Create Post from the Posts.js component, it will open this component on the basis of route.
Now, put the code for the above form, and form handling by submitting the data to the API.
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
export default class AddPost extends Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
post: {
title: '',
body: ''
},
titleError: '',
bodyError: '',
message: ''
}
}
componentDidMount() {
// fetch post
if(this.props.match.params.id) {
axios.get('https://jsonplaceholder.typicode.com/posts/'+this.props.match.params.id)
.then((response) => {
if(response.status === 200) {
this.setState({
post: response.data
});
}
})
.catch((error) => {
console.log(error);
})
}
}
// set post title and body to state
handleChange = (e) => {
console.log(this.state.post);
this.setState({
post : {
...this.state.post,
[e.target.name]: e.target.value
}
})
}
// form submit handler
submitHandler = (e) => {
e.preventDefault();
const isValid = this.formValidate();
if(isValid) {
this.props.match.params.id ? this.updatePost() : this.createPost();
this.setState({
post: {
title: '',
body: ''
},
titleError: '',
bodyError: ''
})
}
}
// form validation
formValidate = () => {
let titleError = "", bodyError = "";
if(!this.state.post.title) {
titleError = "Enter the post title";
}
if(!this.state.post.body) {
bodyError = "Enter the content";
}
if(titleError || bodyError) {
this.setState({
titleError, bodyError
});
return false;
}
return true;
}
// update post
updatePost = () => {
axios.put('https://jsonplaceholder.typicode.com/posts/' + this.props.match.params.id, {
title: this.state.post.title,
body: this.state.post.body
})
.then((response) => {
console.log(response.data);
this.setState({
message: "Success! post updated"
})
})
.catch((error) => {
console.log(error);
});
}
// create post
createPost = () => {
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: this.state.post.title,
body: this.state.post.body
})
.then((response) => {
console.log(response.data);
this.setState({
message: "Success! post created"
})
})
.catch((error) => {
console.log(error);
});
}
render() {
console.log(this.state);
return(
<div className="container py-4">
<div className="row">
<div className="col-xl-12 text-end">
<Link to={"/posts"} className="btn btn-primary"> Back to Posts</Link>
</div>
</div>
<div className="row my-3">
<div className="col-xl-8 m-auto">
<form onSubmit={this.submitHandler}>
<div className="card shadow">
<div className="card-header">
<h5 className="card-title fw-bold"> {this.props.match.params.id ? 'Update Post' : 'Create Post'} </h5>
</div>
<div className="card-body">
<div className="form-group py-2">
<label htmlFor="title"> Title </label>
<input type="text" name="title" onChange={this.handleChange} value={this.state.post.title} className="form-control"/>
<span className="text-danger">{this.state.titleError}</span>
</div>
<div className="form-group py-2">
<label htmlFor="body"> Body </label>
<textarea type="text" rows="5" name="body" onChange={this.handleChange} value={this.state.post.body} className="form-control" />
<span className="text-danger">{this.state.bodyError}</span>
</div>
</div>
<div className="card-footer">
<div className="row">
<div className="col-xl-2">
<button type="submit" className="btn btn-success">{this.props.match.params.id ? 'Update' : 'Create'}</button>
</div>
<div className="col-xl-10 py-2">
<span className="text-success">{this.state.message}</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
}Let me explain what I have done in the above snippet.
Code Explanation
- In the above component, created a constructor and state at the top.
- Created the form with input having the onChange() event. Using this change hander, I have set the value of inputs to the state.
- Inside the componentDidMount() function, created the GET request for rendering the single post data to the form to edit it. This will call only when the post is going to edit and having the id as a parameter.
- If the params have id then it will fetch the single post and set it to the state. Also, through the state, it will be rendered to the input component.
- Now, to create a new post, or update the existing one, I have created two different functions respectively.
- To submit the form, we have the submitHandler() function. This will validate the form and on the basis of props param that is id. It will call the function. So, I have called the function inside the ternary operator.
That’s it for the snippet. Let’s check the result.
Create LinkedIn Login in Laravel 8 Using Socialite
Check the Result of API Request Through Form
Just click on the Create Post, you will be having the below form.
When you will click on submit without filling the title, and body, it will show the validation error message.
When the post is created, it will show you the success response.
You can checkout the Network tab for the API call response.
When you click on edit, the post will be redirected to its respective route with the post id. We have handled it inside the AddPost.js component.
Now, try updating the content of the post and you will see the below response.
After updating the post, you will get the success response. Here, I have reset the state that’s why the form input has been cleared after updating the post.
Lastly, check the result of DELETE request by deleting the post. After clicking on Delete action, it will trigger the onClick() function and hit the API with DELETE request. It will delete the single post based on the given post id.
Conclusion
In this post, we got the idea of implementing the Axios npm package in React js. We have seen the HTTP requests handling using GET, POST, PUT/PATCH, and DELETE method. Also, we have used React state to hold the API response for rendering it to the view. We used the array.map() function for the iteration of array data. I hope this will be helpful for implementing the API handling in React JS.
Leave a Reply