React Axios Post Request Example

By Hardik Savani September 5, 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 :
Shares