React Axios Make HTTP POST Requests Example

React axios post request example. In this tutorial, i will show you step by step guide on how to make HTTP POST request in react app using axios.

Working with React App and you have to send or fetch data from API in React App. So for that you can use axios post request.

A POST request can be made with Axios to “get” OR “send”data from a server. The HTTP post request is performed by calling axios.POST(). The POST() method requires two parameters to be supplied to it. First, it needs the URI of the service endpoint. Second, it should be passed an object that contains the properties we want to send to our server.

Axios HTTP POST request in react app example, I will create a simple form and send data to server using axios http POST request in react app.

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

Step 1 – Create React App

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

Recommended:-How To Install React App On Windows 10

Step 2 – Set up Bootstrap 4

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;

Recommended:-React JS Axios GET Request Example

Step 3 – Create POST Request Component

Visit /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 – Import Component in App.js

Import component in app.js, So visit src/App.js file and import user.js:

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 Tutorials