How to fetch API data in React?

1

I am wanting to console.log data from this API when I hit the search button. I am just starting out with React and so I’m not entirely sure how to this.

import React, {useEffect, useState} from'react';
import Recipes from './Recipes.js';
import './App.css';



function App() {
const API_KEY = process.env.REACT_APP_API_KEY;
const API_ID = process.env.REACT_APP_API_ID;


const getRecipes = async() => {
  const response = await fetch(
    `https://api.edamam.com/search?q=chicken&app_id=${API_ID}&app_key=${API_KEY}`
  )
  const data = await response.json();
  console.log(data)
}


  return(
    <>
    <Recipes />
    <div className="container">
      <input className="input" type="text"></input>
      <button onClick={getRecipes} className="search-button">Search</button>
    </div>
    </>
  )
}

export default App;
2

What are you getting when you run this? I assume there’s some sort of render error, as there’s no render() in your component?

3

@snowmonkey I assume render is in an index.js or something.

@fkhan698 what are you getting back? There doesn’t seem to be anything wrong with what you have, so you might have to check the API docs if it isn’t giving you what you want.

4

I am getting this error

Screen Shot 2020-01-14 at 9.50.33 AM
Screen Shot 2020-01-14 at 9.50.33 AM2872×114 33.1 KB

I also have the render in my index.js

5

You can try using a cors proxy, also the API key and APP id seems to not be coming through. Are you setting them in an .env file?

6

Yeah I already had my .env file set up like this

REACT_APP_API_KEY = #API Key
REACT_APP_API_ID = #API ID
7

Does it work if you hardcode the key and id into the string you are using in fetch?

8

Thats actually what I just tried to do. I get an error message saying (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

9

Is that with or without the cors proxy?

Edit: If you just put the URL into the browser do you at least get the json back?

https://api.edamam.com/search?q=chicken&app_id=ApplicationID&app_key=ApplicationKeys
10

@fkhan698 I just tested the API locally and you do not need the proxy. Make sure the .env file is in the app root folder, not the src folder.

11

I got it to work again after I took out the .env and just left the API keys in the App.js. But whenever I try to use the env I get the same errors. And the .env file is in the root

12

Not sure what the issue is then. Did you restart the app after adding the .env file? Maybe also double check that you are using the long number for the API_KEY and the short one for the API_ID. Other than that I can’t really think of anything.

13

Have you tried adding a second argument to the fetch with an object like:

{
      method: "GET",
      mode: "cors",
      headers: {
        "Content-Type": "application/json"
      },
2 Likes
14

What about using Axios in react?

15

You should be able to use dotenv to load env files from the root of your directory, so outside the src folder. Then just import dotenv into the component and set the API key to REACT_APP_API_KEY={whatever your API key is} inside of the env file.

Set the path of the env file to dotenv.config({ path: "./config.env" }); inside the component then you can pull your API key using process.env.REACT_APP_API_KEY.

so your url for the response should look like this:

`https://api.edamam.com/search?q=chicken&app_id=${process.env.REACT_APP_API_ID}&app_key=${process.env.REACT_APP_API_KEY}`

Hopefully that is explained well enough.

16

I think that might be what I am missing. I forgot to import the .env file. So do I put the dotenv.config({ path: "./config.env" }); line at the top of my App.js which is the code I had above?

17

You don’t need to do anything. As long as the .env file is in the root and you are using create-react-app.

As said, I tested this locally using the code you posted with my own API id/key and it works just fine. You can make a private Github repo and PM the link if you want.

1 Like
18

Reminder:
All API keys will become public once the React App is built. They will no longer be secret even if using an .env file.

19

@fkhan698 If you are still looking for a solution, perhaps this lesson on the venerable Scrimba platform could help steer you in the right direction…? https://scrimba.com/p/p7P5Hd/c79Jask

20

I’m having the same issue and wondering if this was solved.
I have a .env file with the variables.

REACT_APP_API_ID="#########"
REACT_APP_API_KEY="###########################";

My App.js file has:
require(“dotenv”).config();

Oddly, this was all working yesterday - even have screenshots of the functional program. Now, I’m getting an error.
When I hard code the app key into App.js, it works. When I switch it back to the variable referring to .env, it only loads the search bar with no recipes.

I’ve already tried restarting the server and refreshing. Any insight would be appreciated!
Repo: https://github.com/LKian/Recipe-App
Thanks

1|690x132

1 Like