React - Ajax POST request

In this article we would like to show you how to make AJAX POST request in React.

In below example fetch method were used with two parameters:

• path to backend logic located on server,
• request configuration that let us to configure: request method, request headers, request body, etc.

In below example we used POST method that alows to send some data in body.

Practical example:

// ONLINE-RUNNER:browser;

//import React from 'react';

const Form = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const elements = e.target.elements;
    const requestData = {
      username: elements.username.value,
      password: elements.password.value,
    };
    const requestJson = JSON.stringify(requestData);
    try {
      const response = await fetch("/path/to/backend", {
        method: "POST",
        body: requestJson,
      });
      const responseText = await response.text();
      console.log(responseText);
    } catch (ex) {
      console.error("POST error!");
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username: </label>
        <input type="text" name="username" />
      </div>
      <div>
        <label>Password: </label>
        <input type="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Submit!" />
      </div>
    </form>
  );
};

const root = document.querySelector("#root");
ReactDOM.render(<Form />, root);