React Axios Post Request Example

Hello Devs, 

In this tutorial, we will learn React Axios Post Request Example

Axios is a npm package and the provide to make http request from your application. in this example we will use "jsonplaceholder" api to store data using axios package.

Follow this step by step guide below. 

Example Code:

import React from 'react';
import axios from 'axios';
  
class CreatePost extends React.Component {
    constructor() {
    super();
    this.state = {
      input: {},
      errors: {}
    };
     
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input
    });
  }
     
  handleSubmit(event) {
    event.preventDefault();
  
    if(this.validate()){
  
        const post = this.state.input;
  
        axios.post(`https://jsonplaceholder.typicode.com/posts`, { post })
        .then(res => {
          console.log('res');
          console.log(res);
          console.log(res.data);
  
          let input = {};
          input["title"] = "";
          input["body"] = "";
          this.setState({input:input});
  
          alert('Post created successfully.');
  
        })
   
    }
  }
  
  validate(){
      let input = this.state.input;
      let errors = {};
      let isValid = true;
  
      if (!input["title"]) {
        isValid = false;
        errors["title"] = "Please enter your title.";
      }
  
      if (!input["body"]) {
        isValid = false;
        errors["body"] = "Please enter your body.";
      }
  
      this.setState({
        errors: errors
      });
  
      return isValid;
  }
     
  render() {
    return (
      <div>
        <h1>React Axios Post Request Example - rathorji.in</h1>
        <form onSubmit={this.handleSubmit}>
  
          <div className="form-group">
            <label for="title">Title:</label>
            <input 
              type="text" 
              name="title" 
              value={this.state.input.title}
              onChange={this.handleChange}
              className="form-control" 
              placeholder="Enter title" 
              id="title" />
  
              <div className="text-danger">{this.state.errors.title}</div>
          </div>
  
          <div className="form-group">
            <label for="body">Body:</label>
            <textarea 
              name="body"
              value={this.state.input.body} 
              onChange={this.handleChange}
              placeholder="Enter body"
              className="form-control" />
  
              <div className="text-danger">{this.state.errors.body}</div>
          </div>
              
          <input type="submit" value="Submit" className="btn btn-success" />
        </form>
      </div>
    );
  }
}
  
export default CreatePost;

May this example help you.