Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') - OpenWeather

Question

I am working on a weather app project in React as a beginner. I am using OpenWeatherAPI in that case.

My problem is when I try to use forEach, it gives an error as it seems below.

ApiCall.jsx:15 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

Here is my Header component:

import ApiCall from './ApiCall';

function Header() {
    const cities = ["İstanbul", "Ankara", "İzmir"]

    return (
        <div>
            <div className="header">
                <select name="selection">
                    <option value="istanbul">{cities[0]}</option>
                    <option value="ankara">{cities[1]}</option>
                    <option value="izmir">{cities[2]}</option>
                </select>
            </div>
            <ApiCall getCities={cities} />
        </div>   
    )

}

export default Header

And this is my ApiCall component:

import axios from "axios"
import { useEffect, useState } from "react"

function ApiCall({ getCities }) {
    const[data, setData] = useState([])
    
    useEffect(() => {
        axios(`https://api.openweathermap.org/data/2.5/forecast?q=${selectCity}&appid=c681e6e33ec339728fdf88e0b24a2a01`)
        .then(res => setData(res.data))
        .catch(err=> console.log(err))
    })
    
    const { city, list } = data
    
    const selectCity = getCities.array.forEach((element) => {
        if (city.name === element) {
            return element
        }
    });

    return (
      null
    )
}

export default ApiCall

All answers will be appreciated.

Answer 1

The foreach should be like this

getCities.forEach

Instead of

getCities.array.forEach

What do you think?

If getCities is an array, you have to use forEach on it instead of using.array.forEach

Answer 2

It seems that you try to filter all the available cities with the cities you are getting as property to your component ( getCities ).

Since getCities is an array you can directly call the forEach function on it and loop over the cities but since you want to apply a filter I think you are better off using Javascript's build-in filter method.

const selectCity = getCities.filter((possibleCityName) => {
        return city.name === possibleCityName)
    });