Sending Http Requests in ReactJS

In this article, we are going to learn how to send and receive Http Responses in a React application.

To send or receive data, we don’t need to use third-party packages, rather we can use the fetch() method which is now supported by all the modern browsers.

Sending GET request

https://jsonplaceholder.typicode.com/todos/1

Jsonplaceholder is a fake API which is used to learn the process of sending requests.

Example

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";

ReactDOM.render(
   <CookiesProvider>
      <App />
   </CookiesProvider>,
   document.getElementById('root')
);

App.jsx

import React, { useEffect, useState } from 'react';
const App = () => {
   const [data, setData] = useState(null);
   const [fetchData, setFetch] = useState(false);

   useEffect(() => {
      if (fetchData) {
         fetch('https://jsonplaceholder.typicode.com/todos/1')
         .then((response) => response.json())
         .then((data) => setData(data.title));
      }
   }, [fetchData]);
   return (
      <>
         <h1>{data}</h1>
         <button onClick={() => setFetch(true)}>Fetch Data</button>
      </>
   );
};
export default App;

In the above example, we are sending the GET request to the jsonplaceholder and accessing the data which is going to be inserted in the state as soon as the response is received.

Output

This will produce the following result.

Sending POST request

https://jsonplaceholder.typicode.com/todos/1

Jsonplaceholder is a fake API which is used to learn the process of sending requests.

Example

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";

ReactDOM.render(
   <CookiesProvider>
      <App />
   </CookiesProvider>,
   document.getElementById('root')
);

App.jsx

import React, { useEffect, useState } from 'react';
import Input from './Input';
import './App.css';
const App = () => {
   const [data, setData] = useState(null);
   const [val, setVal] = useState('');
   const [fetchData, setFetch] = useState(false);

   useEffect(() => {
      if (fetchData) {
         const payload = {
            method: 'POST',
            body: JSON.stringify({ title: val }),
         };
         fetch('https://jsonplaceholder.typicode.com/posts', payload)
         .then((res) => res.json())
         .then((data) => setData(data.id));
      }
   }, [fetchData]);
   return (
      <>
         {data && <h1>Your data is saved with Id: {data}</h1>}
         <input
            placeholder="Title of Post"
            value={val}
            onChange={(e) => setVal(e.target.value)}
         />
         <button onClick={() => setFetch(true)}>Save Data</button>
      </>
   );
};
export default App;

In the above example, we are sending the POST request to the jsonplaceholder with the input field value in the body and displaying the response accordingly.

Output

This will produce the following result.