React .map() is not a function error
Solution 1
You are instantiating the app by saying this.state = { weather: []};
. However, When you say this.setState({weather: res.data})
, you are overriding the this.state.weather
to a JavaScript object
rather than array
, thus the .map
is not available anymore.
You can achieve what you're trying to do by simply const weathermap = this.state.weather.wind.speed
Solution 2
this.state.weather is a javascript object so .map is not available you can use
Object.Keys(YourObject).map()
Solution 3
You should do conditional check and then do .map like
.map with return syntax
const { weather } = this.state;
const weathermap = weather && weather.map(maps => {
return <span>{maps.wind && maps.wind.speed}</span>
});
.map without return syntax
const { weather } = this.state;
const weathermap = weather && weather.map(maps => (
<span>{maps.wind && maps.wind.speed}</span>
));
jsPlayer
Updated on June 09, 2022Comments
-
jsPlayer almost 2 years
import React, {Component} from 'react'; import './App.css'; import axios from 'axios'; export default class App extends Component { constructor() { super(); this.state = { weather: [] }; } componentDidMount (){ this.search(); } search = () => { axios.get("http://api.openweathermap.org/data/2.5/weather?q=Houston&APPID=f2327cca8f3d665f4c9f73b615b294ed") .then(res => { this.setState({weather: res.data}); }).catch(error => { console.log('Error from fetching data', error); }) } render() { console.log(this.state.weather); const weathermap = this.state.weather.map( (maps) =>{ {maps.wind.speed} }); return ( <div className="container"> <div className="row"> <div className="col-md-4 col-md-offset-4"> <div className="weather"> <div className="current"> <div className="info"> <div> </div> <div className="city"> <small> <small>CITY:</small> </small> {this.state.weather.name}</div> <div className="temp">67° <small>F</small> </div> <div className="wind"> <small> <small>WIND:{weathermap}</small> </small> </div> <div> </div> </div> <div className="icon"> <span className="wi-day-sunny"></span> </div> </div> <div className="future"> <div className="day"> <h3>Mon</h3> <p> <span className="wi-day-cloudy"></span> </p> </div> <div className="day"> <h3>Tue</h3> <p> <span className="wi-showers"></span> </p> </div> <div className="day"> <h3>Wed</h3> <p> <span className="wi-rain"></span> </p> </div> </div> </div> </div> </div> </div> ); } }
I am getting a "this.state.weather.map is not a function" error. I am fetching data from weather api. I got the name from api displayed ok. api call it self is ok is success too. here how the api looks like in console
here is the code