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
Top comments (0)