Weather information not displaying after making API call to openweathermap.org

Question

I am trying to make an app that will display the weather data after the user enters a city. I am using the openweathermap.org API. In my console under networks it shows that I am making an API call when I enter the city but no data is returning. The missing data that should display is the city name, the temperature and the weather. Please advise on how I can fix this.

App.js:

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

function App() {
  const apiKey = 'API Key'; //I entered my API key here
  const [weatherData, setWeatherData] = useState([{}]);
  const [city, setCity] = useState('');

  const getWeather = (event) => {
    if (event.key == 'Enter') {
      fetch(
        'https://api.openweathermap.org/data/2.5/weather?q=s{city}&units=imperil&APPID=${apiKey}' //I copied this api from the tutorial
      )
        .then((response) => response.json())
        .then((data) => {
          setWeatherData(data);
          setCity('');
        });
    }
  };
  return (
    <div className="container">
      <input
        className="input"
        placeholder="Enter City..."
        onChange={(e) => setCity(e.target.value)}
        value={city}
        onKeyPress={getWeather}
      />

      {typeof weatherData.main === 'undefined' ? (
        <div>
          <p>Welcome to weather app! Enter the city you want the weather of.</p>
        </div>
      ) : (
        <div className="weather-data">
          <p className="city">{weatherData.name}</p>
          <p className="temp">{Math.round(weatherData.main.temp)}℉</p>
          <p className="weather">{weatherData.weather[0].main}</p>
        </div>
      )}

      {weatherData.cod === '404' ? <p>City not found.</p> : <></>}
    </div>
  );
}

export default App;

App.css:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px;
 }

 .input {
padding: 15px;
width: 80%;
margin: auto;
border: 1px solid lightgrey;
border-radius: 6px;
font-size: 16px;
 }

 .input:focus{
  outline: none;
 }

 .weather-data{
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
 }

 .city{
  font-size: 30px;
  font-weight: 200;
 }

 .temp{
  font-size: 90px;
  padding: 10px;
  border: 1px solid lightgray;
  border-radius: 12px;
 }

 .weather{
  font-size: 30px;
  font-weight: 200;
 }

Answer 1

In fetch function, you're actually inputting a normal string as a parameter.

Instead of the straight tick like in a normal string (') use backticks (`) instead, and use the dollar sign (${apiKey}) to wrap the variable as a string.