How to Fetch Data From an External API in React JS?

React JS is a popular JavaScript library that makes it easy to build scalable web applications. One of the key features of React is its ability to fetch data from external APIs. In this article, we will explore how to fetch data from an external API in React JS.

Understanding APIs

APIs, or Application Programming Interfaces, allow applications to communicate with each other. When we talk about fetching data from an API, we are essentially asking another application to give us some information. This information can be in the form of JSON, XML, or any other format that the API supports.

Setting Up the Project

Before we can start fetching data from an external API in React JS, we need to set up a project. To do this, we can use the create-react-app tool. Here are the steps:

• Open your terminal and navigate to the directory where you want to create the project.
• Run the following command to create a new React project:

npx create-react-app my-app

• Once the project is created, navigate to the project directory:

cd my-app

• Finally, start the development server:

npm start

Fetching Data from an API

Now that we have our project set up, we can start fetching data from an external API. For this example, we will use the JSONPlaceholder API, which provides a collection of fake JSON data for testing and prototyping.

To fetch data from an API in React JS, we will use the built-in fetch API. Here’s an example:

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

In this example, we are using the useState hook to store the data that we fetch from the API. We are also using the useEffect hook to fetch the data when the component mounts. Finally, we are rendering the data in our component.

Errors Handling

When working with APIs, it’s important to handle errors gracefully. If the API returns an error, our application should display a meaningful message to the user.

Here’s an updated example that includes error handling:

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else {
    return (
      <div>
        {data.map((item) => (
          <div key={item.id}>
            <h2>{item.title}</h2>
            <p>{item.body}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

In this updated example, we are using the useState hook to store both the data and the error. We are also using the fetch API’s built-in error handling by checking the response status and throwing an error if it’s not “ok”. Finally, we are rendering either the data or the error message depending on the state of our component.

Passing Parameters to an API

Sometimes, we need to pass parameters to an API to get specific data. For example, we might want to get only the posts by a certain user. To do this, we can append query parameters to the API URL. Here’s an example:

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);
  const [userId, setUserId] = useState(1);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [userId]);

  return (
    <div>
      <select value={userId} onChange={(e) => setUserId(e.target.value)}>
        <option value="1">User 1</option>
        <option value="2">User 2</option>
        <option value="3">User 3</option>
      </select>
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

In this example, we are using the useState hook to store the selected user ID. We are also using the useEffect hook to fetch the data whenever the user ID changes. Finally, we are rendering a select element that allows the user to choose which user’s posts to display.

Conclusion

In this article, we have explored how to fetch data from an external API in React JS. We learned about APIs, how to set up a React project, and how to use the fetch API to fetch data from an API. We also learned how to handle errors and pass parameters to an API. By following these guidelines, you can create powerful and dynamic web applications that fetch data from external APIs.

FAQs