POST request using axios with React Hooks
Today we’ll show you how to integrate POST request using axios with React Hooks. In the previous article, we had discussed about the GET request using axios.
In this article, we will show you a simple form to submit using a POST request in React Hooks.
Demo Application
Table of Contents: POST request using axios
1. Installing axios
Run the following command to install the axios with npm or yarn CLI.
npm CLI: npm install axios
yarn CLI: yarn install axios
2. POST request with a JSON body using axios
Let’s use the following syntax for the POST request.
1 2 3 4 5 6 7 8 | const data = { name: 'name', job: 'job' }; axios.post('https://reqres.in/api/users', data) .then(response => { console.log("Status: ", response.status); console.log("Data: ", response.data); }).catch(error => { console.error('Something went wrong!', error); }); |
We have used the post method of the axios and attached the JSON body with the request.
3. POST request with HTTP header
We can use the third parameter to pass the HTTP headers. Look at the following code where we are passing the Authorization and Custom-Header along with the same request.
1 2 3 4 5 6 7 8 9 10 11 12 | const data = { name: 'name', job: 'job' }; const headers = { 'Authorization': 'Bearer my-auth-token', 'Custom-Header': 'xxxx-xxxx-xxxx-xxxx' }; axios.post('https://reqres.in/api/users', data, { headers }) .then(response => { console.log("Status: ", response.status); console.log("Data: ", response.data); }).catch(error => { console.error('Something went wrong!', error); }); |
4. Example
Here, we will use the bootstrap package to design the page where we will create a form to submit the data using POST request via fake API.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import React, { useState } from 'react'; import axios from "axios"; import 'bootstrap/dist/css/bootstrap.min.css'; function App() { const [name, setName] = useState(''); const [job, setJob] = useState(''); const [loading, setLoading] = useState(false); const [isError, setIsError] = useState(false); const [data, setData] = useState(null); const handleSubmit = () => { setLoading(true); setIsError(false); const data = { name: name, job: job } axios.post('https://reqres.in/api/users', data).then(res => { setData(res.data); setName(''); setJob(''); setLoading(false); }).catch(err => { setLoading(false); setIsError(true); }); } return ( <div className="container p-3"> <h5 className="d-inline-block mb-3">POST request using axios with React Hooks - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5> <div style={{ maxWidth: 350 }}> <div classNames="form-group"> <label htmlFor="name">Name</label> <input type="text" className="form-control" id="name" placeholder="Enter name" value={name} onChange={e => setName(e.target.value)} /> </div> <div classNames="form-group"> <label htmlFor="job" className="mt-2">Job</label> <input type="text" className="form-control" id="job" placeholder="Enter job" value={job} onChange={e => setJob(e.target.value)} /> </div> {isError && <small className="mt-3 d-inline-block text-danger">Something went wrong. Please try again later.</small>} <button type="submit" className="btn btn-primary mt-3" onClick={handleSubmit} disabled={loading} >{loading ? 'Loading...' : 'Submit'}</button> {data && <div className="mt-3"> <strong>Output:</strong><br /> <pre>{JSON.stringify(data, null, 2)}</pre> </div> } </div> </div> ); } export default App; |
Run the above file and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
