Hello, I making a weather app, I want to display 7-days forecast but it is returning an error and I couldn’t figure how to solve it
This is the error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
at search (main.ac8fae7fe8a50ee8c7db.hot-update.js:59:150)
at HTMLUnknownElement.callCallback (bundle.js:12218:18)
at Object.invokeGuardedCallbackDev (bundle.js:12267:20)
at invokeGuardedCallback (bundle.js:12327:35)
at invokeGuardedCallbackAndCatchFirstError (bundle.js:12342:29)
at executeDispatch (bundle.js:16577:7)
at processDispatchQueueItemsInOrder (bundle.js:16609:11)
at processDispatchQueue (bundle.js:16622:9)
at dispatchEventsForPlugins (bundle.js:16633:7)
at bundle.js:16844:16
search @ main.ac8fae7fe8a50ee8c7db.hot-update.js:59
callCallback @ bundle.js:12218
invokeGuardedCallbackDev @ bundle.js:12267
invokeGuardedCallback @ bundle.js:12327
invokeGuardedCallbackAndCatchFirstError @ bundle.js:12342
executeDispatch @ bundle.js:16577
processDispatchQueueItemsInOrder @ bundle.js:16609
processDispatchQueue @ bundle.js:16622
dispatchEventsForPlugins @ bundle.js:16633
(anonymous) @ bundle.js:16844
batchedEventUpdates$1 @ bundle.js:30529
batchedEventUpdates @ bundle.js:12016
dispatchEventForPluginEventSystem @ bundle.js:16843
attemptToDispatchEvent @ bundle.js:14326
dispatchEvent @ bundle.js:14244
unstable_runWithPriority @ bundle.js:159065
runWithPriority$1 @ bundle.js:19624
discreteUpdates$1 @ bundle.js:30546
discreteUpdates @ bundle.js:12028
dispatchDiscreteEvent @ bundle.js:14210
Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
at search (main.ac8fae7fe8a50ee8c7db.hot-update.js:59:150)
at HTMLUnknownElement.callCallback (bundle.js:12218:18)
at Object.invokeGuardedCallbackDev (bundle.js:12267:20)
at invokeGuardedCallback (bundle.js:12327:35)
at invokeGuardedCallbackAndCatchFirstError (bundle.js:12342:29)
at executeDispatch (bundle.js:16577:7)
at processDispatchQueueItemsInOrder (bundle.js:16609:11)
at processDispatchQueue (bundle.js:16622:9)
at dispatchEventsForPlugins (bundle.js:16633:7)
at bundle.js:16844:16
App.js:
import './App.css';
import {openweatherApi} from './openweatherApi';
import React, {useState} from 'react';
import { Header } from './components/Header/Header';
import { Main } from './components/Main/Main';
import { Fail } from './components/Fail/Fail';
import { Land } from './components/Land/Land';
// import { FiveDays } from './components/FiveDays/FiveDays';
const App = () => {
const [query, setQuery] = useState("");
const [weather, setWeather] = useState("");
const [dailyForecast, setDailyForecast] = useState("");
const search = event =>{
if(event.key === 'Enter'){
fetch(`${openweatherApi.URL}weather?q=${query}&appid=${openweatherApi.API_KEY}`)
.then( (result) => {
if(result.ok){
return result.json();
}else{
console.log('invalid city');
}
})
.then(json => {
setWeather(json);
// setLat(weather.coord.lat);
// setLon(weather.coord.lon);
console.log(json);
})
.then(
// https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}
fetch(`${openweatherApi.URL}onecall?lat=${weather !== undefined || weather !== "" ? weather.coord.lat : null}&lon=${weather !== undefined || weather !== "" ? weather.coord.lon : null}&exclude=current,minutely,hourly,alerts&appid=${openweatherApi.API_KEY}`)
.then( (res) =>{
if(res.ok){
return res.json();
}else{
return 'Ok Doo';
}
})
.then(json =>{
setDailyForecast(json);
console.log(json);
})
)
}
}
const handleFail = () =>{
if(weather === undefined){
return <Fail />
}else if(weather === ""){
return <Land />
}
else{
return <Main
weather={weather}
dailyForecast={dailyForecast} />
}
}
let date = new Date();
let hours = date.getHours();
// console.log(date.getDay());
return (
<div className={ hours > 7 && hours < 18 ? 'morning' : 'morning'} >
<div className="App">
<div className='content'>
<Header
search={search}
setQuery={setQuery}
weather={weather}
/>
{/*Rendering fail or main */}
{handleFail()}
<div className='footer'>A project by Khaled Nadam</div>
</div>
</div>
</div>
);
}
export default App;