This week I decided to create a recipe fetching an API from edamam.com.
Set up the app and edamam account
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.
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’.
Fetch the recipe API
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.
Fetch the data from the api
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.
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.
Create a state
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.
Create a Recipe.js component
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.
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.
Handle search
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).
Handle the query
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(‘’).
Styling
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.
Conclusion
Very nice and easy react app that was a great practice in my react journey. Hope this blog was useful, thanks for reading!
Bonus
To have the calories display as rounder number, simply add the .toFixed() function that comes with react.
