React + Axios POST request example

In my previous article, I have written how to make POST requests in JavaScript using Axios. In this article, we will see how to do the same in React.

Project setup

Create a new react app using the following command:

npx create-react-app react-axios-post

Install the axios library by running the below command:

npm i axios

Add the following css in index.css:

body {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

Creating the login form

Update the App.js with the following code:

function App() {
  return (
    <div>
      <form action="" id="login" method="post">
        <h1>Login</h1>
        <p className="item">
          <label for="email"> Email </label>
          <input type="email" name="email" id="email" />
        </p>
        <p className="item">
          <label for="password"> Password </label>
          <input type="password" name="password" id="password" />
        </p>
        <p className="item">
          <input type="submit" value="Login" />
        </p>
      </form>
    </div>
  )
}

export default App

Here we have created a form with 2 fields: email and password. Also, we have a button to submit the form.

Handling the form submit

In the below code,

• We are storing the email and password in their respective local states.
• We have added a submit handler for the form, which calls the API endpoint using Axios with email and password in the request body.

import axios from "axios"
import { useState } from "react"

function App() {
  const handleSubmit = e => {
    // Prevent the default submit and page reload
    e.preventDefault()

    // Handle validations
    axios
      .post("https://example.con/login", { email, password })
      .then(response => {
        console.log(response)
        // Handle response
      })
  }

  const [email, setEmail] = useState()
  const [password, setPassword] = useState()
  return (
    <div>
      <form action="" id="login" method="post" onSubmit={handleSubmit}>
        <h1>Login</h1>
        <p className="item">
          <label for="email"> Email </label>
          <input
            type="email"
            name="email"
            id="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </p>
        <p className="item">
          <label for="password"> Password </label>
          <input
            type="password"
            name="password"
            id="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </p>
        <p className="item">
          <input type="submit" value="Login" />
        </p>
      </form>
    </div>
  )
}

export default App