React Axios Post Request Example

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:

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 - codewale.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...