React - When user search an API in form, how to handle no matches in API? - json

Question

I'm trying to build an weatherapplication for a schoolproject in React. I've gotten so far that when i search for London, it will show me the current temprature and other useful information i've chosen to display. I simply want a message to appear that the city could not be found, i guess this somehow should done in a variable and with help of If statements?
However im not sure how i handle if the user types something that that isnt there, for example "new jorc" instead of New York. My current code looks like this.
getWeather = async (e) => {
e.preventDefault();
const city= e.target.elements.city.value;
if(city){
const api_call = await fetch(
`http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
);
const response = await api_call.json();
this.setState({
city: `${response.name}`,
celsius: this.evenDeagree(response.main.temp),
wind: this.evenDeagree(response.wind.speed),
feelsLike: this.evenDeagree(response.main.feels_like)
});
} else{
this.setState({error: true})
}
Any aid is appreciated.

Answer 1

A try/ catch block could work.
Wrap the call in the try block and put any error handling code you want in the catch block.
This way if the user types in "New Jork", the call will fail and enter the catch block. (You could also use .then/.catch instead as fetch returns a promise, up to you)
You should also check the response before setting it to the state, put something like this after response;
if (!response.ok) {
return "INPUT ERROR";
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch