← Back to all tutorials
React TutorialEpisode 29

Making a POST Request

Send data to the server using a POST request with the Fetch API.

Use fetch() with the POST method to save data to the server.

POST Request

const handleSubmit = (e) => {
  e.preventDefault();
  const blog = { title, body, author };

  fetch("http://localhost:8000/blogs", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(blog)
  }).then(() => {
    console.log("Blog added!");
  });
};

Adding Loading State

const [isPending, setIsPending] = useState(false);

setIsPending(true);
fetch(...).then(() => {
  setIsPending(false);
});

<button disabled={isPending}>
  {isPending ? "Adding..." : "Add Blog"}
</button>