Fetching data from the backend and showing it to the user is an essential job of the frontend developer.

Suppose you have created a React App using create-react-app and now you want to show some data on the UI which is present at here.

How do I get the data which is present here to my react app?

Here we are trying to get data from an API here. Now REST API has a GET method that we will use along with Axios to request the data.

const requestedData = axios.get("https://reqres.in/api/users");

This code snippet is requesting data from the server and storing the result in requestedData. Axios is a promise-based library so the result returned is a Promise and we have to handle the promise. If the promise is successful we use .then(), if the promise is rejected then we catch the error using .catch()

const requestedData = axios.get("https://reqres.in/api/users").then().catch();

then has a callback function that automatically has the response object as an argument. The data we want to retrieve is in that response object. Similarly, if the promise is rejected then the error msg is in the catch.

const requestedData = axios.get("https://reqres.in/api/users")
.then((response) => console.log(response) )
.catch(error => console.error(`This error occurred : ${error}`));

Now if you run this code snippet the issue you would face is that get request will be getting called continuously and you could see it in console of your application. Why is it happening I am not sure at the moment but then you should move the whole code to the function that way we can call fetch method using useEffect() only while mounting the object.

const App =() => {
const requestedData = () =>
axios.get("https://reqres.in/api/users")
.then((response) => console.log(response) )
.catch(error => console.error(`This error occurred : ${error}`));

useEffect(()=> {requestedData()},[]);

return <div className="App"> </div>;
}

Now if you run the above code snippet the console will show you {data: {…}, status: 200, statusText: '', headers: {…}, config: {…}, …} this is the response object which is returned in then method. Here status indicates if the response you got was okay or not. You can read more about it here.

We are interested in data property of the object so console.log(response.data) will return this {page: 1, per_page: 6, total: 12, total_pages: 2, data: Array(6), …}. Now that is the data which is present in the API and we wanted to fetch. So the final code would look like below

const App =() => {
const requestedData = () =>
axios.get("https://reqres.in/api/users")
.then((response) => {
const desiredData = response.data;
console.log(desiredData);
} )
.catch(error => console.error(`This error occurred : ${error}`));

useEffect(()=> {requestedData()},[]);

return <div className="App"> </div>;
}

This article assumes you are familiar with react hooks,callback function and arrow functions.