Removing city from the api react hooks - reactjs

Question

function DataWeather({ weather, setWeather }) {
const cityName = weather.city.name;
const countryName = weather.city.country;
const minTemp = weather.list.main.temp_min;
const maxTemp = weather.list.main.temp_max;
const handleRemoveItem = (id) => {
setWeather((weather) => weather.filter((city) => city.id !== id));
};
return (
<div>
<div>
<span onClick={handleRemoveItem}>
x
</span>
<p>
{cityName} {countryName}
</p>
<p>MaxTemp : {maxTemp}</p>
<p>MinTemp: {minTemp}</p>
</div>
</div>
);
}
export default DataWeather;
Hey, I'm trying to remove city from coming api, but i get error that filter is not a function. Anyone has idea why I get this error. I have initialize weather with useState([]).
function WeatherData() {
const [query, setQuery] = useState("");
const [weather, setWeather] = useState({});
const FetchData = async (e) => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/forecast?q=${query},&appid=${YOU_API}`
);
const weatherData = await response.json();
setWeather(weatherData);
} catch (err) {
console.log(err);
}
};
return (
<div>
<main>
<form onSubmit={FetchData}>
<input
type="text"
placeholder="Click"
onChange={(e) => setQuery(e.target.value)}
value={query}
/>
{Object.entries(weather).length !== 0 ? (
<DataProfile weather={weather} setWeather={setWeather} />
) : (
<h3> Please City Name </h3>
)}
<button className="btn">Click</button>
</form>
</main>
</div>
);
}
as you can see here is the rest of my code fetching the weather api to get the detail of this api. I just want to remove the data by clicking the X.

Answer 1

Because weather is an object so you can't delete it with filter.
You can use spread operator to update object like this:
const handleRemoveItem = (id) => {
setWeather((weather) => ({...weather, city: {}}));
};