React Axios Send Asynchronous HTTP Post Request Example

In web development, Axios allows users to make POST requests to the server to fetch or update data in react. In this tutorial, you will learn how to send an asynchronous HTTP POST request to a React application using Axios.

How to Make Axios Post Request in React JS App

Here are steps:

• Step 1 – Create a React App
• Step 2 – Set up Bootstrap
• Step 3 – Create Axios POST Request Component
• Step 4 – Import Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Set up Bootstrap

Run the following command to install bootstrap library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>React Axios Post Request Example</h2>
    </div>
  );
}
export default App;

Step 3 – Create Axios POST Request Component

Create a component that name User.js in /src/ directory, and make HTTP POST requests on server:

import React from 'react';
import axios from 'axios';
class User extends React.Component {
  state = {
    name: '',
  }
  handleChange = event => {
    this.setState({ name: event.target.value });
  }
  handleSubmit = event => {
    event.preventDefault();
    const user = {
      name: this.state.name
    };
    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}
export default User;

Step 4 – Import Component in App.js

Import User.js component file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import User from './User';
function App() {
  return (
    <div>
      
        <User />
    </div>
  );
}
export default App;

Conclusion

That’s it, you have learned how to use Axios HTTP client in react js app to make post request.

Recommended React js Tutorials