React Axios Post Request Example

By Hardik Savani | June 3, 2020 | Category : React JS


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



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: