I am facing an issue with my API call while trying to retrieve temperature data for a specific city. I am unsure if the problem lies with my API key or the code itself. Can you please provide guidance on how I can resolve this issue? Upon entering the city name in the web app and pressing enter, the API call does not appear in the network settings of my console.
App.js:
import React, { useState } from 'react';
import './App.css';
function App() {
const apiKey = 'API KEY'; //I added 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}' //this API was taken from a 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>
<p>{weatherData.name}</p>
<p>{Math.round(weatherData.main.temp)}℉</p>
<p>{weatherData.weather[0].main}</p>
</div>
)}
</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;
}