Fetching Data with Axios in React (2024)

Axios is a popular JavaScript library used for making HTTP requests, and it can be especially useful in React applications for fetching data from APIs. In this blog post, we'll explore how to use Axios in a React application to fetch data from an API and display it on the page.

import { useEffect, useState } from "react"import axios from "axios";interface User { id: number; name: string}function App() { const [users, setUsers] = useState<User[]>([]); const [error, setError] = useState(''); useEffect(() => { axios .get<User[]>("https://jsonplaceholder.typicode.com/users") .then((res) => setUsers(res.data)) .catch(err => { setError(err.message); }); }, []); return ( <> {error && <p className="text-danger">{error}</p>} <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </> ); } export default App; 

The code imports two dependencies - `useEffect` and `useState` from the React library and `axios` library.

import { useEffect, useState } from "reactimport axios from "axios";" 

An interface named `User` is defined with two properties `id` and `name`.

interface User { id: number; name: string} 

The `App` function is defined which is the main component in this code. It uses `useState` hook to declare `users` state which is initially set to an empty array.

 const [users, setUsers] = useState<User[]>([]); 

The `useEffect` hook is used to make an HTTP GET request to the JSONPlaceholder API to retrieve a list of users. When the component mounts, the `useEffect` hook is triggered and makes an API call using the `axios.get()` method. The API endpoint is passed as an argument to the method. The `axios.get()` method returns a promise which resolves with the response data.

 useEffect(() => { axios .get<User[]>("https://jsonplaceholder.typicode.com/users") .then((res) => setUsers(res.data)) .catch(err => { setError(err.message); }); }, []) 

The `then` method is chained to the promise, which updates the `users` state with the response data by calling the `setUsers` function. The `catch` method is also chained to the promise to handle errors and log them to the console.

The overall purpose of this code is to render a list of users' names within an unordered list (<ul>) element. If there is an error present, it will also display an error message above the list. This is a common pattern in React components for displaying dynamic data fetched from an API, where the list is generated based on the data received.

return ( <> {error && <p className="text-danger">{error}</p>} <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </> ); 

By using the `axios.get()` method to fetch data from an API and updating the state with the response data, we can easily display the fetched data in our React components.

In conclusion, using Axios with React is a powerful combination for making HTTP requests and fetching data from APIs. By understanding the code above, you can apply these concepts to your own React projects and make use of the vast amount of data available on the internet.