React - .map returning not a function?

Question

I was following this example: https://reactjs.org/docs/faq-ajax.html

But my code is returning weather.map is not a function?

function App(props) {

  const [weather, setWeather] = useState([]);

  useEffect(() => {
    fetch("https://api.openweathermap.org/data/2.5/weather?q=kalamazoo&appid=XXXXXXXXXXXX")
    .then(res => res.json())
    .then(
      (result) => {
      setWeather(result)
      console.log(result)
      }
    )
  },[])

  return (
    <div className="App">
      {weather.map(item => (
        <li key={item.id}>{item.main}</li>
      ))}
      
    </div>
  );
}

export default App;

I understand that it expects an array, but even if the API hasn't returned I still get the error.

I think the data you're getting from api is not of array type. What data did you get in console.log? — Inder
– Inder, Commented May 6, 2022 at 21:47

Aneesh · Accepted Answer · 2022-05-06 21:53:35Z

2

The openweathermap GET /weather API returns an object. You can check out on their Swagger for details of the APIs and their exact response formats

To access the weather information, you need to do the following:

useEffect(() => {
    fetch(
        'https://api.openweathermap.org/data/2.5/weather?q=kalamazoo&appid=XXXXXXXXXXXX'
    )
        .then((res) => res.json())
        .then((result) => {
            setWeather(result.weather); // this is where weather data array is present
            console.log(result);
        });
}, []);

answered May 6, 2022 at 21:53

Aneesh

1,7256 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salem_Raouf · Accepted Answer · 2022-05-06 22:05:36Z

0

map is not a function error mean that that weather data type is not an array so it hasn't a map function the API returning an Object so instead of direct map you can use

Object.values(weather || {}).map((item)=>{
  return(
   <li key={item.id}>{item.main}</li>
 )
})

answered May 6, 2022 at 22:05

Salem_Raouf

4315 silver badges10 bronze badges

Collectives™ on Stack Overflow

React - .map returning not a function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related