TypeError: oldCities is not iterable

Question

I'm working in a weather app using React but I have this error and can't solve it

"TypeError: oldCities is not iterable"

Here's my full code:

import React, { useState } from 'react';
import './App.css';
import Nav from './components/Nav';
import Cards from './components/Cards.jsx'

export default function App() {

  const [cities, setCities] = useState()

  console.log(setCities)

  const apiKey = 'api_key'

  function onSearch(city){
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
      .then(response => response.json())
      .then(json => {
        if(json.main !== undefined){
          const city = {
            min: Math.round(json.main.temp_min),
            max: Math.round(json.main.temp_max),
            id: json.id,
            img: json.weather[0].icon,
            wind: json.wind.speed,
            temp: json.main.temp,
            name: json.name,
            logitude: json.coord.lon,
            latitude: json.coord.lat
          };
          setCities(oldCities => [...oldCities, city])
        }
        else{
          alert('Ciudad no encontrada')
        }
      })
      .catch(e => console.log(e))
  }

  return (
    <div className="App">
      { /* Tu código acá: */ }
      <Nav onSearch={onSearch} />
      <Cards cities={cities} />
    </div>
  );
}

An idea on how can I add the data to setCities in a different way?

Answer 1

Since you are working with React i would assume your code look like this

const [oldCities, setCities] = useState([])

I'm not sure what is oldCities used for but if u want to append the val of the city u get from your API call it should be

setCities([...oldCities, new_city ])  // Append to cities array
// Note here to not use oldCities.append
// bc it will preserve the memory address of the array
// and hence not update the component state