How to use the Fetch API with React?

You can use the built-in fetch() method in JavaScript to make HTTP requests, and you can use the setState() method in React to update the state of your application when the response is received.

By combining the Fetch API with React, you can build powerful and dynamic web applications that communicate with APIs and display real-time data to users.

Setting up a basic React App

To set up a basic React app, you'll need to have Node.js and npm installed on your machine. If you don’t, you can download it from here.

Once you have installed it, you can follow these two simple steps to bootstrap a React app:

Step #1: Create React App

Open your terminal or command prompt and navigate to the directory where you want to create your React app. Now run the following command to create a React app.

sh
Copy
npx create-react-app my-app

Replace "my-app" with the name you want to give your app.

Step #2: Run the application

To start the development server and run your app in the browser, navigate to the app directory and execute the following command:

sh
Copy
cd my-app
npm start

This should open a new browser window showing your app. You would see something like this:

React app running on port 3000

That's it! You now have a basic React app set up using Create React App.

Using the Fetch API in React

The Fetch API is built into modern web browsers, so it doesn't require additional libraries or packages to be installed. You can simply use the global fetch function.

js
Copy
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Now you can easily use it to fetch data from a remote API, submit data to a server, or perform any other HTTP request.

Fetching data

When working with APIs in a React application, one of the most common tasks is to fetch data using the HTTP GET method. In this section, we will walk through the basic usage of the Fetch API in React, e.g. making a GET request, POST request, etc.

Making a GET Request

To fetch data in React using Fetch API, we just use the fetch method with the API endpoint's URL to retrieve data from the server. For this guide, we’ll use the Jokes by API-Ninjas.

Once signed up, please ensure that you subscribe to the Jokes by API-Ninjas before using the API in your app.

js
Copy
import React, { useState, useEffect } from "react";
function Joke() {
  const [joke, setJoke] = useState(null);
  useEffect(() => {
    fetch("https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes", {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "your-api-key",
        "X-RapidAPI-Host": "jokes-by-api-ninjas.p.rapidapi.com",
      },
    })
      .then((response) => response.json())
      .then((data) => {
        setJoke(data[0].joke);
        console.log(data);
      })
      .catch((error) => console.log(error));
  }, []);
  return (
    <div>
      <h2>Joke of the day:</h2>
      {joke && <p>{joke}</p>}
    </div>
  );
}
export default Joke;

We have made a React Component that fetches and displays a random joke from an API endpoint. The fetch method is called with the API endpoint's URL and the required headers to authenticate the API key. Once the data is retrieved, the first joke is extracted from the response data and set as the joke state using the setJoke method.

Finally, the component renders a heading and the joke using conditional rendering to ensure that the joke is displayed only after it has been fetched successfully.

Make sure you replace “your-api-key” with your own api key. You will see something like this on your browser:

Fetched a Joke from the Joke API using fetch in React

Sending POST requests

To send a POST request with the Fetch API, we need to specify the HTTP method as "POST" in the options object passed to the fetch function. We also need to include the data we want to submit in the body of the request.

js
Copy
const joke = {
  setup: 'Why did the chicken cross the road?',
  punchline: 'To get to the other side!'
};
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-RapidAPI-Key': 'your-api-key',
    'X-RapidAPI-Host': 'jokes-by-api-ninjas.p.rapidapi.com',
  },
  body: JSON.stringify(joke)
};
fetch('https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Using Async/Await

Async/await is a modern approach to asynchronous programming in JavaScript, which makes it easier to handle promises and avoid callback. Using async/await with Fetch API can simplify your code and make it more readable.

js
Copy
import React, { useState, useEffect } from 'react';
const Joke = () => {
  const [joke, setJoke] = useState('');
  const fetchJoke = async () => {
    try {
      const response = await fetch('https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes', {
        method: 'GET',
        headers: {
          'X-RapidAPI-Key': 'your-api-key',
          'X-RapidAPI-Host': 'jokes-by-api-ninjas.p.rapidapi.com'
        }
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setJoke(data[0].joke);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  useEffect(() => {
    fetchJoke();
  }, []);
  return (
    <div>
      <h2>Joke of the day:</h2>
      {joke && <p>{joke}</p>}
    </div>
  );
}
export default Joke;

Wrap up

With the Fetch API, you can easily fetch data from a server and update your React components accordingly. By using the built-in methods, such as .then() and .catch(), you can handle asynchronous requests and gracefully handle any errors that may occur.