Display values from an API to your React project

Alexis Ruiz — Sun, 15 Jan 2023 09:06:59 +0000

How many times did you try to display a value from an API but you console.log everything and you get an error.

I am currently learning how to use ReactJS and a few days ago at the beginning I had some minor mistakes and few hours lost because of some small errors I did. I will try to put every lost moment into this post.

This is for beginner, who just starting to learn the framework and like me was lost and even thought ‘Am I this stupid ?’. Don’t worry, you are not and I went to this point of thinking ‘Why can’t I do simple things like this ?’.

I will break it into every problems I faced.

For the advanced/master/professional, there will be some mistakes in this post. Maybe a lot. I'm just learning and thought that writing thoses posts will help me in my quest. I will not explain how to hide the API key, so the API key will be public. But it will help people to at least make the call work. So please tell me every mistakes in the comments section and I will change the post.

Put the url of the API in a const

Just create a const with your API URL in it. For me it works and it's easier to modify if you want just one info from your API, of course for bigger project you might need to put the API url in the call.

const url = 'YOUR_API_URL";

Using AXIOS

To make it easy Axios is a Javascript Library used to make HTTP request from node.js or XMLHttpRequests from the browser. It will make the call for the API easier.

You need first to install axios :

$ npm install axios

Then, you make the call :

 axios.get('YOUR_API_URL').then((response) => {
        setState(response.data);
      });

Here the setState is your State you want to put the result of the call API.data.

There is other library available like SWR or react-query but I've never try those and right now I'm mostly using Axios.

Call the right data

I know it sounds stupid but make sure you are using the right name to the object.

Are you sure you calling the right state?
Are you sure you put your API reponse in the right state?

Let's use an exemple.


myObject{
   'city': 'London',
   'weather':[
      {
        'id':21,
        'description':'sunny',
      }
    ]
   }

Let say the object in is call inside the setState like the exemple above. So to display the value London we will have to call :

{state.city}

That is easy, right? The first thing your learn.

But now when you try to access the description of the weather with {state.weather.description} the console display undefined.

Like I understand it, the weather is an array, so try to access the object.

{state.weather[0].description} //sunny

Here you ask for the first object in the array and this object is the id and description.

Map()

You can always use the function map() if you have an array.

For exemple you got this array :

const array = ['London','Paris','Madrid','Berlin'];

You want to display this array in h3 tags.

{array.map((data) => (<h3>{data}</h3>))}

This will display:

<h3>London</h3>
<h3>Paris</h3>
<h3>Madrid</h3>
<h3>Berlin</h3>

Of course, you need an unique key for each data you want to display. You just have to use the key from the API or create a key and display it in the h3 tags.

<h3 key='unique_key'>

Read the Documentation

Make sure you read the documentation for your API correctly. Sometimes you just need to changes things in the url or the object you want has another name.

This advice works every time you want to use a library even the MDN Web Docs.

Bonus fetch and async await

If you don't want to use the Axios library or any other library you can use the fetch method to call the API.

For the fetch method:

fetch('API_url')
   .then((response) => response.json())
   .then((data) => setState(data));

To make it simple, it transforms the response in json then you can put the data in the setState.

For the async await method:

async function getData() {
   const response = await fetch('API_url');
   const data = await response.json();
   setState(data);
}
getData();

For this method, you have to create an async function here called getData(). In this function, you call the API and transform the reponse into a json file and put the data in the setState, similar to the fetch method. But you have to call the function at one point in your code, here : getData().

Summarize

Make sure you are calling the API right.
Make sure you writing the right terminology.
Read the documentation well.
Read your code, the mistakes might be something missing in your code.

I hope this first post of mine is usefull. Like I said before, this post is for beginners who struggle with small things like this. I just started to learn React and I thought those small posts could help others and most importantly help me remember the old mistakes and sort of have a journal that I can access everywhere.

DEV Community: Alexis Ruiz