How to Make POST Request in React: Simple Guide with Example

In React, you can make a POST request using the fetch API by specifying the method as POST and including the request body as a JSON string. Use async/await inside a function to handle the request and response cleanly.

Syntax

To make a POST request in React, use the fetch function with these parts:

• URL: The address where you send data.
• Method: Set to POST to send data.
• Headers: Usually include Content-Type: application/json to tell the server the data format.
• Body: The data you want to send, converted to a JSON string.

Wrap this in an async function and use await to wait for the response.

javascript

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

Example

This example shows a React component with a button that sends a POST request to a test API when clicked. It sends JSON data and shows the server response below the button.

javascript

import React, { useState } from 'react';

export default function PostRequestExample() {
  const [responseData, setResponseData] = useState(null);

  async function handlePost() {
    const data = { name: 'Alice', age: 25 };
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      const json = await response.json();
      setResponseData(json);
    } catch (error) {
      setResponseData({ error: 'Request failed' });
    }
  }

  return (
    <div>
      <button onClick={handlePost}>Send POST Request</button>
      {responseData && (
        <pre>{JSON.stringify(responseData, null, 2)}</pre>
      )}
    </div>
  );
}

Output

{
  "name": "Alice",
  "age": 25,
  "id": 101
}

Common Pitfalls

Common mistakes when making POST requests in React include:

• Forgetting to set Content-Type header to application/json, causing the server to misinterpret data.
• Not converting the data object to a JSON string with JSON.stringify.
• Not handling the response asynchronously, leading to errors or empty data.
• Ignoring errors from the fetch call, which can cause silent failures.

Always use try/catch to handle errors and check the response status if needed.

javascript

/* Wrong way: Missing headers and no JSON stringify */
fetch('https://example.com/api', {
  method: 'POST',
  body: JSON.stringify({ name: 'Bob' }) // This is now a string
});

/* Right way: */
fetch('https://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob' })
});

Quick Reference

Remember these key points when making POST requests in React:

• Use fetch with method: 'POST'.
• Set headers: {'Content-Type': 'application/json'}.
• Convert data to JSON string with JSON.stringify().
• Use async/await and try/catch for clean code and error handling.

Key Takeaways

Use fetch with method 'POST' and include headers and JSON stringified body.

Always handle the response asynchronously with async/await.

Set 'Content-Type' header to 'application/json' when sending JSON data.

Use try/catch blocks to handle errors gracefully.

Convert your data object to a JSON string before sending.