I created a simple weather web app from a youtube video and I wanted it to refresh every 3 or 30 seconds automatically but I'm getting an unidentified error when I try to use setInterval
:
App.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'key') at search (App.js:15:1)
I just started react-js, here's my code:
import './App.css';
import React, { useState } from 'react';
const api = {
key: "5f285d33be01b937453b7e1688fc75ee",
base:"https://api.openweathermap.org/data/2.5/"
}
function App() {
const [query, setQuery] = useState('');
const [weather, setWeather] = useState({});
const search = evt => {
if (evt.key === "Enter") {
fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(res => res.json())
.then(result => {
setWeather(result);
setQuery('');
console.log(result);
});
}
}
//
const dateBuilder = (d) => {
let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let day = days[d.getDay()];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${day} ${date} ${month} ${year}`
}
function round(value, precision) {
var multiplier = Math.pow(10, precision || 0);
return Math.round(value * multiplier) / multiplier;
}
return (
<div className={(typeof weather.main != "undefined")? ((weather.main.temp > 9) ? ((weather.weather[0].main == 'Rain')? 'app rain': ((weather.weather[0].main == 'Clouds')? 'app clouds': 'app warm')) : 'app'): 'app'}>
<main>
<div className='search-box'>
<input type="text" className='search-bar' placeholder='Search...' onChange={e => setQuery(e.target.value)} value={query} onKeyPress={search} />
</div>
{(typeof weather.main != "undefined") ? (
<div>
<div className='loaction-box'>
<div className='location'>
{weather.name}, {weather.sys.country}
</div>
<div className='date'>{dateBuilder(new Date())}</div>
<div className='weather-box'>
<div className='temp'>
{Math.round(weather.main.temp)}°c
<div className='weather-small'>
Humidity: {weather.main.humidity}%
<br/>
Wind: {round(weather.wind.speed,1)}km/h
</div>
<div className='weather-small'></div>
</div>
<div className='weather'>
{weather.weather[0].description}</div>
</div>
</div>
</div>
): ('')}
</main>
</div>
);
}
export default App;
There is no setInterval
in the shared code snippet but based on the code and the included error message I am assuming you tried passing search
as the interval callback.
setInterval(search, 3000);
The issue here is that search
expects to be passed an onKeyPress
event object.
const search = evt => {
if (evt.key === "Enter") { // <-- evt undefined
fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(res => res.json())
.then(result => {
setWeather(result);
setQuery('');
console.log(result);
});
}
}
I suggest refactoring the code a bit. Factor out the fetching logic from the keypressing logic. Create a onKeyPress
handler that invokes the search
callback and passes the query
state, and use a useEffect
hook with a dependency on the query
state to instantiate an interval timer.
Example:
const search = async (query) => {
try {
const res = await fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`);
const result = await res.json();
setWeather(result);
console.log(result);
} catch (error) {
// catch & handle any Promise rejections and thrown errors
}
}
const keyPressHandler = async (evt) => {
if (evt.key === "Enter") {
await search(query);
setQuery('');
}
}
useEffect(() => {
let timer = null;
if (query) {
timer = setInterval(search, 3000, query);
}
return () => clearInterval(timer);
}, [query]);