Removing item from the api react hooks

function DataProfile({ weather, setWeather }) {
  const { id } = weather;
  const cityName =;
  const countryName =;
  const minTemp = weather.list[0].main.temp_min;

  const removeCity = (itemId) => {
    setWeather(weather.filter(({ id }) => id !== itemId));

  return (
      <div className="list">
        <button onClick={removeCity} >
          {cityName} {countryName}
        <p>MaxTemp : {maxTemp}</p>

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 initialized weather with useState([]).


This error just means that you’re trying to use .filter on a variable that is not an array.

Maybe the weather variable is just an object, and to remove it’s content it would be as simple as re-setting it’s state to an empty object like this:


I’m assuming you did const [setWeather, weather] = useState({}) before and then assigned a value to it with setWeather(), and wish to revert it back to an empty object.

In this case, the removeCity function would look like this:

const removeCity = () => {

I think this works for what you need.