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. ```javascript 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 : ```powershell $ npm install axios ``` Then, you make the call : ```jsx 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. ```javascript 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 : ```jsx {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. ```javascript {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 : ```javascript const array = ['London','Paris','Madrid','Berlin']; ``` You want to display this array in `h3` tags. ```javascript {array.map((data) => (

{data}

))} ``` This will display: ```HTML

London

Paris

Madrid

Berlin

``` 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. ```jsx

``` ## 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](https://developer.mozilla.org/en-US/). ## 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: ```javascript 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: ```javascript 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.

molikuc

Display values from an API to your React project

Join Our Newsletter. No Spam, Only the good stuff.