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:

Code
http://localhost:5288/api/Employee

Step 1: Create a React Component

Create a new component called AddEmployee.js.

Code
src/components/AddEmployee.js

Import React and required hooks.

Code
import React, { useState } from 'react'

Step 2: Create State Variables

We will create state variables to store form input values.

Code
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.

Code
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.

Code
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.

Code
<button onClick={handleSubmit}>Add Employee</button>

Step 6: Complete Code

Below is the full working React component.

Code
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:

Code
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:

Code
{
 "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: