React Axios Post Request Example

Now, let's see example of axios post request in react js. This article goes in detailed on react axios post request example. i would like to show you axios post request example react js. I’m going to show you about http post request in react js.

If you want to learn how to send http post request with react then i will help you step by step instruction for sending http request using axios react. i will give you very simple example to send http post request using axios and react.

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.

So, let's see bellow example code and preview:

Preview:

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 - ItSolutionStuff.com</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;

I hope it can help you...