Cannot use variables in fetch API

Question

I'm new to react development. I tried to create a simple project which searches for the weather of a city by using an API. Using fetch I tried to call the API:

getWeather = async (e) => {
    e.preventDefault();
    const url = 'https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=${API_KEY}';
    const api_call = await fetch(url);
    const data = await api_call.json() ;
    console.log(data);
}

But when I submit, the console log says wrong API KEY. Instead if I give the API key directly into the URL it works, can somebody help me?

Use template string. You set just a string ${API_KEY} it needs to be a variable. const url = `api.openweathermap.org/data/2.5/weather?q=London,uk&appid=${API_KEY}`; — Alexandr Vyshnyvetskyi
– Alexandr Vyshnyvetskyi, Commented Nov 23, 2019 at 17:18
This is what Alexandr means: use like this const url = https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=${API_KEY}; — SuleymanSah
– SuleymanSah, Commented Nov 23, 2019 at 17:21
You can use backticks instead of a single quote. https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=${API_KEY} — Afia
– Afia, Commented Nov 23, 2019 at 17:22

schu34 · Accepted Answer · 2019-11-23 17:24:19Z

2

the problem is that you're using the incorrect type of quotes. you're using ' (single-quote or apostrophe) and you need to be using backticks, it's the key to the left of the 1 key on most keyboards if you want to use string interpolation (that's what the ${} is called)

answered Nov 23, 2019 at 17:24

schu34

9857 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

schu34 Over a year ago

Glad to be of service! If the solution worked for you please mark it as accepted so that when others find this question they can easily see the solution

Collectives™ on Stack Overflow

Cannot use variables in fetch API

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related