initially its showing output but on search giving this error-"Unhandled Rejection (TypeError): Cannot read property 'lon' of und

Question

import React, { useState, useEffect } from 'react'

const First = () => {
const [city, setcity] = useState(null);
const [search, setsearch] = useState("mumbai");
const [longitude, setlongitude] = useState("");

useEffect(() => {
const fetchapi = async () => {
const url = `http://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid={api_key}`;
const response = await fetch(url);
const resjson = await response.json();
console.log(resjson.coord.lon);
setlongitude(resjson.coord.lon);
setcity(resjson.main);
}
fetchapi();
}, [search]);

return (
<div className="first">
<div className="App">
<h1>WEATHER APP 1</h1>
<input type="search" className="input" value={search} onChange={(event) => { setsearch(event.target.value) }} />

{!city ? (<p>no data found</p>) :
(
<>
<div>
<h2 >{search}</h2>
<h3 >{city.temp}&deg; cel</h3>
<h3 >Min : {city.temp_min}&deg; cel | Max : {city.temp_max}&deg; cel</h3>

<h4>longitude : {longitude}</h4>
</div>
</>
)}
</div>
</div>
)
}

export default First

Answer 1

Try
resjson.coord?.lon

Since you have controlled resjson, however rsjson.coord might be undefined if search has not formed a city name while typing.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.