React Axios Send Asynchronous HTTP Post Request Example

React axios post request tasks in web development is sending HTTP requests to a server to fetch or update data. In this tutorial, you will explore how to send an asynchronous HTTP POST request in a React application using Axios.

Axios is a popular JavaScript library that makes it easy to send HTTP requests from a browser or Node.js. It provides a simple and elegant API for handling HTTP requests and responses. And as well as, this tutorial will guide you from scratch on how to make axios post request in react js app.

How to Make Axios Post Request in React JS App

Follow below given steps to make axios post request in react js app:

• Step 1 – Create React App
• Step 2 – Set up Bootstrap 4
• Step 3 – Create POST Request Component
• Step 4 – Add 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 4

In this step, execute the following command to install boostrap 4 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 POST Request Component

In this step, /src/ directory and create a component, which name User.js. Then add the following code into it:

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 – Add Component in App.js

In this step, you need to add User.js 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

How to make Axios POST HTTP request in React js app, you have learned how to use Axios POST HTTP request in react js app. And submit form data using Axios POST request in your react js app.

Recommended React js Tutorials