Build a recipe app fetching API using React

This week I decided to create a recipe fetching an API from edamam.com.

First I created my app using the command ‘npx create-react-app recipe’ that gave me the structure of my app. I deleted everything in app.js in the header tag and replaced it with a simple div tag with a class of ‘app’ and a h1 simply printing ‘hello world’.

Next I went to edamam.com, signed up for Recipe Search API as a developer.

First step is to sign up in the recipe API
And select the developer option

Once your account is set up, go to your dashboard, and in your applications, you will find the API key and id when you click on ‘view’.

Click on view to find out the key and id

In App.js, create 3 constants that will contain you API key, API id and the fetched uri where you replace the APP_ID with your own constant APP_ID and APP_KEY with your own APP_KEY. Note that it will need to be wrapped up in back-ticks in order to use the $ sign. You will need to go to edamam in order to get this uri, which you will find under recipe Search API documentation.

Right now with this address, the query will be set to ‘chicken’ so the app will search for ‘chicken’ per default, but we will update this later.

Next create your form with an input and a button with a value of ‘search’. Run ‘npm start’ to check how it looks.

Basic input / search bar

Next, import ‘useState’ and ‘useEffect’ from the react library. Write a ‘useEffect’ function that will run the function ‘getRecipes’ that we will write below. ‘getRecipes’ is an async await function that will fetch the uri that we declared previously and will get a response in a JSON format. You can check if you are getting some data back by adding a console.log data in ‘getRecipes’ and should get the result like shown in the screenshot below.

console.log(data)

Looking at the data, we can see that we access to a lot of informations like the images, calories, cuisine type, etc… That is what we are going to use to set up our app.

Now we need to create a state and set that state to whatever comes back from this api. To do so, create a constant [recipes, setRecipes] that will be equal to useState([]) because we are going to store the objects in an array. ‘setRecipes’ will be called and will take the data.hits that is the array shown above in the console.log.

This recipe component will be responsible for displaying the recipe cards with the information. For this app, we are going to show the title, ingredients calories and image.

Recipe.js

Then in App.js, we will import this recipe component at the top and map over the recipes and return some JSX with our chosen props. What we are doing here is taking the attributes from the state and passing into the props so that our Recipe component can have access to it.

Note that without the ‘key’ line, you will get an error in your console.

First let’s create a state for that search by writing a constant ‘state, setSearch’. Then in out return function in the input tag, let’s add a value that will equal to the state ‘search’. As of right now, if you refresh the page and try to type something in the search bar, nothing will print. To fix this, we need to add an ‘onChange’ event which means that every time we add an input, it is going to run. What we want to run in this case is an arrow function ‘updateSearch’. This function will take the state ‘setSearch’ and pass in the value of what we put in (e.target.value).

So as of right now, our app will only gives us results for chicken.. I love chicken but having a fully functional app would be much more interesting! To do so, create another constant [query, setQuery] that will be equal to useState(‘chicken’). Then add a “query” both to the useEffect function and in your uri inside of ${} instead of… you guessed it, chicken!

Next create a constant getSearch that we want to run every time we submit the form. First we want to prevent the page from refreshing so that we add e.preventDefault(). Then we set the query equal to what the user inputs, the ‘search’. Then we want to reset the search bar to an empty value so we add the line setSearch(‘’).

To add some styling, add a new file called App.css in the ‘src’ folder. Please refer to my app.css file as I am not going to detail all the steps here. And lastly import this new App.css file on top of your App.js. You’ll notice in my github repo that there is a ‘recipe.module.css’ file, this is so I can strictly update the css in the recipe component.

Very nice and easy react app that was a great practice in my react journey. Hope this blog was useful, thanks for reading!

To have the calories display as rounder number, simply add the .toFixed() function that comes with react.

French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.