React is a JavaScript library for building user interfaces. Often you will want to fetch data from an API and display it in your React application.
Axios is a promise-based HTTP client that makes it easy to fetch data from APIs.
In this tutorial I will show you the simplest way to fetch API data and display it in your website.
Prerequisites
You should have a basic knowledge of React
Install Axios
Install Axios in your project folder using the following command:
npm install axios
Import Axios
Import Axios in the component which you want to make API calls in as shown below:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
Making a GET Request
To make a GET request, use the following code:
axios.get(url)
.then(response => {
// Handle the successful response here
console.log(response.data);
})
.catch(error => {
// Handle errors here
console.error('Error fetching data:', error);
});
Handling Asynchronous Operations
To handle asynchronous functions we use 'async/await' since API calls are asynchronous operations and React ensures that the UI remains responsive during these calls:
const fetchData = async() =>{
try {
const response = await axios.get(url)
setData([response.data])
} catch (error) {
console.log(error)
}
}
fetchData()
Integrate with React Components
Integrate your knowledge of data fetching in your React components as shown below:
import axios from 'axios'
import React, {useState, useEffect} from 'react'
const App = () => {
const [data, setData] = useState([])
const url = "https://api.chucknorris.io/jokes/random"
useEffect(() => {
const fetchData = async() =>{
try {
const response = await axios.get(url)
setData([response.data.value])
} catch (error) {
console.log(error)
}
}
fetchData()
}, [])
return (
<ul>
{data.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)
}
export default App
We use the useEffect hook to call the API when the component mounts.
Axios makes the Get request and returns a promise. When the promise resolves, we set the state using setData.
We finally use the map function to loop the data and display it on the page.
Remove React.StrictMode in your index.js file(If you are using Create-React-App) or main.js file(If you are using Vite) to prevent the useEfect hook from running twice.
Refresh the page to get more Chuck Norris jokes.
Top comments (1)
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { FaTrashAlt } from "react-icons/fa";
import { Link } from 'react-router-dom';
export default function Home() {
const [characters, setCharacters] = useState([]);
const [name, setName] = useState('');
const [image, setImage] = useState('');
const [gender, setGender] = useState('');
const [search, setSearch] = useState('');
const [user, setUser] = useState(null);
const url = 'api url
useEffect(() => {
const userData = localStorage.getItem('user');
if (userData) {
setUser(JSON.parse(userData));
}
}, []);
const getData = () => {
axios.get(url)
.then(response => {
setCharacters(response.data);
})
.catch(err => {
console.error( err);
});
};
useEffect(() => {
getData();
}, []);
const submit = (e) => {
e.preventDefault();
};
const filteredCharacters = characters.filter(char =>
char.name.toLowerCase().includes(search.toLowerCase())
);
const deletePost = (id) => {
axios.delete(
${url}/${id}).then(() => {
getData();
})
.catch(err => {
console.error(err);
});
};
return (
);
}