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