I'm trying to map over data from API, but while writing the code to display the data I got this error: TypeError: weatherData.map is not a function

I tried removing useEffect from the code and tried to add curly brackets: const [weatherData, setWeatherData] = useState([{}])

Update: Line 14 log undefined : console.log(weatherData.response)

import axios from 'axios'
import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [search, setSearch] = useState("london")
  const [weatherData, setWeatherData] = useState([])



  const getWeatherData = async () => {
    try {
      const weatherData = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${search}&appid={APIKEY}`);
      console.log(weatherData.response);
      if (weatherData) {
        setWeatherData(weatherData);
      }
    } catch (err) {
      console.error(err);
    }
  }

  useEffect(() => {
    getWeatherData()
  }, [getWeatherData])

  const handleChange = (e) => {
    setSearch(e.target.value)
  }


  return (
    <div className="App">
      <div className='inputContainer'>
        <input className='searchInput' type="text" onChange={handleChange} />
      </div>
      {weatherData.map((weather) => {
        return (
          <div>
            <h1>{weather.name}, {weather.country}</h1>
          </div>
        )
      })}
    </div>
  )
}

export default App

CodePudding user response：

Create a promise function:

const getWeatherData = async () => {
  try {
    
    const weatherData = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${search}&appid={APIKEY}`);
    console.log(weatherData.response);

    if (weatherData.response.data) { 
        setWeatherData(weatherData.response.data);
    }
  } catch (err) {
    console.error(err);
  }
}

Then call it.

CodePudding user response：

You're having errors in fetching the data as well as rendering it.

Just change the entire App component like this :

import { useEffect, useState } from "react";
import axios from "axios";
function App() {
  const [search, setSearch] = useState("London");
  const [weatherData, setWeatherData] = useState([]);
  const APIKEY = "pass your api key here";

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `https://api.openweathermap.org/data/2.5/weather?q=${search}&appid=${APIKEY}`
      );

      setWeatherData(result.data);
    };

    fetchData();
  }, [search]);

  const handleChange = (e) => {
    setSearch(e.target.value);
  };

  return (
    <div className="App">
      <div className="inputContainer">
        <input className="searchInput" type="text" onChange={handleChange} />
      </div>
      <h1>
        {" "}
        {weatherData.name} ,{" "}
        {weatherData.sys ? <span>{weatherData.sys.country}</span> : ""}{" "}
      </h1>
    </div>
  );
}

export default App;

this should be working fine just make sure to change : const APIKEY = "pass your api key "; to const APIKEY = "<your API key> ";

this is a demo in codesandbox