by Sai gowtham

How to Make Post request in React using Axios

How to Make Post request in React using Axios

In this tutorial, we are going to learn about post request in the react.js with the help of examples.

Installing Axios

First, we need to install the axios http client library from the npm.

Run the below command in your terminal to install the axios.

npm i axios

Example post component

Note: This tutorial only shows you how to make a post request, if you want to learn about react forms checkout my previous tutorial.

This is our example Post component which contains input field and textarea field where two way data binding is used to access the input values.

Post.js
import React,{Component} from 'react';

class Post extends Component {
  state = {
    title: "",    body: ""  };
  onTitleChange = e => {
    this.setState({
      title: e.target.value
    });
  };

  onBodyChange = e => {
    this.setState({
      body: e.target.value
    });
  };
  render() {
    return (
      <div className="post">
        <form className="post" >
          <input placeholder="Title" value={this.state.title}            onChange={this.onTitleChange} required          />
          <textarea            placeholder="Body" value={this.state.body}            onChange={this.onBodyChange} required          />
          <button type="submit">Create Post</button>
        </form>
      </div>
    );
  }
}
export default Post;

Making a post request

Post.js
import React, { Component } from "react";
import axios from "axios";
class Post extends Component {
  state = {
    title: "",
    body: ""
  };

  onTitleChange = e => {
    this.setState({
      title: e.target.value
    });
  };

  onBodyChange = e => {
    this.setState({
      body: e.target.value
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    const data = {
      title: this.state.title,
      body: this.state.body
    };
    axios      .post("https://jsonplaceholder.typicode.com/posts", data)      .then(res => console.log(res))      .catch(err => console.log(err));  };

  render() {
    return (
      <div className="post">
        <form className="post" onSubmit={this.handleSubmit}>
          <input
            placeholder="Title" value={this.state.title}
            onChange={this.onTitleChange} required
          />
          <textarea
            placeholder="Body" value={this.state.body}
            onChange={this.onBodyChange} required
          />
          <button type="submit">Create Post</button>
        </form>
      </div>
    );
  }
}

export default Post;

In the above code, we first imported axios object from the axios library.

Where axios.post method takes two arguments, the first argument is url and the second argument is the data we need to post to our backend server then we chained with then method and catch method.

then method is invoked when a post request is successful.

catch method is invoked when a post request is failed and error has occurred.

Output

react-post-request-example

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course