Introduction
In modern web applications, React applications often need to communicate with backend APIs to store data. One of the most common operations is sending data to the server using a POST API request.
In this article, we will learn how to integrate a POST API in React using the Fetch API to add employee data.
Prerequisites
Before starting, make sure you have:
Example API endpoint used in this article:
http://localhost:5288/api/Employee
Step 1: Create a React Component
Create a new component called AddEmployee.js.
src/components/AddEmployee.js
Import React and required hooks.
import React, { useState } from 'react'
Step 2: Create State Variables
We will create state variables to store form input values.
function AddEmployee() {
const [name, setName] = useState("");
const [department, setDepartment] = useState("");
}
Step 3: Create Form for Employee Input
Now create a form where users can enter employee details.
return (
<div>
<h2>Add Employee</h2>
<input
type="text"
placeholder="Enter Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="Enter Department"
value={department}
onChange={(e) => setDepartment(e.target.value)}
/>
<button>Add Employee</button>
</div>
)
Step 4: Create Function to Call POST API
Now create a function that will send employee data to the backend.
const handleSubmit = () => {
const employeeData = {
name: name,
department: department
};
fetch("http://localhost:5288/api/Employee", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(employeeData)
})
.then(response => response.json())
.then(data => {
console.log("Employee Added Successfully", data);
})
.catch(error => console.log(error));
};
Step 5: Attach Function to Button
Update the button to call the function.
<button onClick={handleSubmit}>Add Employee</button>
Step 6: Complete Code
Below is the full working React component.
import React, { useState } from 'react'
function AddEmployee() {
const [name, setName] = useState("");
const [department, setDepartment] = useState("");
const handleSubmit = () => {
const employeeData = {
name: name,
department: department
};
fetch("http://localhost:5288/api/Employee", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(employeeData)
})
.then(response => response.json())
.then(data => {
console.log("Employee Added Successfully", data);
})
.catch(error => console.log(error));
};
return (
<div>
<h2>Add Employee</h2>
<input
type="text"
placeholder="Enter Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="Enter Department"
value={department}
onChange={(e) => setDepartment(e.target.value)}
/>
<button onClick={handleSubmit}>Add Employee</button>
</div>
)
}
export default AddEmployee
Step 7: Run the Application
Start the React application:
npm start
Now enter employee details and click Add Employee.
The data will be sent to the backend API and stored in the database.
Output
The employee data will be successfully saved in the backend database using the POST API.
Example data sent to API:
{
"name": "Sandeep",
"department": "IT"
}
Conclusion
In this article, we learned how to integrate a POST API in React using the Fetch API. This approach helps React applications communicate with backend services and store data.
We covered: