Fetching data from a REST API with React

By the end of this guide, we’ll have a React app that uses user inputted ingredients to query a Recipe API and displays recipes containing that ingredient.

For this tutorial, I’m going to assume that:

In our react app, we’ll be making calls/requests to a specific API endpoint using parameters given to us by the user. The endpoint then responds to our request with JSON formatted data, which we can parse and display to the user.

With that said, let’s get started!

On the admin page, copy down the API Key as we’ll be using this later.

Then, navigate into the app directory and run ‘npm start’ to get our app running on localhost:3000.

Open a browser and visit ‘localhost:3000’ to make sure our app is working.

If all is well so far, we can begin working on our code!

First open up your project in the text editor of your choice. Once the project is open, navigate to the file “food-app/src/App.js” which contains the main code for the app. Remove the code between the outer div so that the render function looks like:

Now we want to provide our user with a text-box so that they can input an ingredient. We’ll add a heading prompting the user to enter an ingredient followed by a text-box, for which we’ll set the id to “ing”. The render function now looks like:

We’ll then write a function called “getRecipes()” that extracts the value in the text-box inputted by the user.

Add a button below the text-box, which when clicked will call our getRecipes function.

Run ‘npm start’ and open up the app as before. Enter any ingredient and click “Add Ingredient”. If everything’s working correctly, you should be able to see the ingredient you entered in the browser console.

Now that everything else is set up, we can finally do what we’ve been waiting so patiently for. The documentation of the Food2Fork Recipe API provides us with a very handy example of requests we can make.

To see what the response will look like when we make a call to the API, follow the instructions in the diagram. As an exercise, change the query parameter to a different ingredient. If I wanted to search for recipes containing “Eggs”, I would enter the following in my browser:

Keep in mind that you want to use the API Key provided specifically for your app.

Now let’s get back to our app.

Once we get a response from the API, we want to be able to store it in a way that we can later display to our user. For this, we will initialize an empty array called “recipes” within the state, which we can update once we get a response. I’ll add the constructor for our app as follows:

We’ll now move on to actually making our GET request. We’ll do so by using the “fetch” function which accepts an endpoint as a parameter and returns the API’s response. The endpoint in this case is just the URL we put into the browser before. We need to add the user’s desired ingredient (which is stored in ‘newIngredient’) to the end of the URL, after which we can call fetch. Add the following lines to the ‘getRecipes()’ function:

All we really have left to do now is use our fetch function to make the request. Once we receive the response from the API, we’ll want to update the current state. We can do this by using the setState() function. Add the following:

Repeat the steps as before to make sure the app is working. Now when our user presses the ‘Add Ingredient’ button, we can see the returned recipes in the console.

Add the following lines after the button:

That’s it! All we need to do now is try it out. Enter any ingredient in the text-box and click the ‘Add Ingredient’ button. You should then be able to see all the recipes, their links and their pictures.

Thanks for reading :)

Related posts:

I was helping to coach my son’s little league baseball practice when a frazzled parent ran up to me, out of breath and clearly experiencing the end of a very bad day. She said, “I’m sorry we’re late…

Zeus Swap is a decentralized exchange (DEX) built on the Ethereum blockchain that allows users to trade cryptocurrencies in a trustless and decentralized manner. The platform utilizes a liquidity…

Does anyone know the laws in california on a default payday loan? I took it out about 9 months ago, I keep getting threating phone calls for the collection company. That they are going to send it to…