TypeError: Cannot read properties of undefined (reading 'map') React JS
Question
I am facing the error TypeError: Cannot read properties of undefined (reading 'map')
This code should return the name of the city in a card title which is defined in my other file but throwing an error.
Codes:
import React, {Component} from 'react';
import Body from './Body';
class Weather extends Component {
constructor(props) {
super(props);
this.state = {
weather: [],
};
}
async componentDidMount() {
const url = `http://api.weatherapi.com/v1/current.json?key=${this.props.api}&q=Jaipur&aqi=no`;
let data = await fetch(url);
let parsedData = await data.json();
this.setState({
weather: parsedData.weather,
});
}
render() {
return (
<div className="container">
<div className="row">
{this.state.weather.map((element) => {
return (
<div className="col-md-4">
<Body city={element.location.name} />
</div>
);
})}
</div>
</div>
);
}
}
export default Weather;
3 answers
solution1
0 2021-09-29 07:03:28
Lets make an assumption that parsedData.weather have correct data type. You should make a conditional logic, to check this.state.weather should have a value from API.
Here's an example
render() {
const { weather } = this.state; // Access the state `weather`
return (
<>
<div className="container">
<div className="row">
{ /* This way use conditional ternary operator */ }
{weather.length ? weather.map((element) => {
return (
<div className="col-md-4">
<Body city={element.location.name}/>
</div>
);
}) : <span>Loading...</span>}
</div>
</div>
</>
);
}
solution2
0 2021-10-16 12:24:03
The Problem:
your weather array is empty before the API call so using this.state.weather.map will cause the error.
The Solution:
There are two important things before using the map with arrayes :
- check for the definition of the array (is the array defined and exists?)
- check its length (is the array has some content?)
First
check its declaration/definition by a simple if statement:
{
if(myArrayOfData) {
myArrayOfData.map(
// rest of the codes ...
)
}
}
Or with using ? shorthanded of if
{
myArrayOfData?.map(
// rest of the codes ...
)
}
Second
check for the contents of the array and use the map function after checking its length (which tells you the data has arrived from the API call etc. and is ready to process)
{
if(myArrayOfData) {
if(myArrayOfData.length > 0) {
myArrayOfData.map(
// rest of the codes ...
)
}
}
}
Finally:
while the above snippet works properly, you can simplify it by checking both if conditions together:
{
if(myArrayOfData?.length > 0) {
myArrayOfData.map(
// rest of the codes ...
)
}
}
So, simply make some changes in the return of Weather component:
<div className="row">
{
if(this.state.weather?.length > 0) {
this.state.weather.map((element) => {
return (
<div className="col-md-4" key={element.id}> // also don't forget about the passing a unique value as key property
<Body city={element.location.name}/>
</div>
);
})
}
}
</div>
Optional:
In real-world examples, you may need to show some loading components while the data is fetching.
{
if(myArrayOfData?.length > 0) {
myArrayOfData.map(
// rest of the codes ...
)
} else {
<Loading />
}
}
Be Aware
const anEmptyArray = []
if(anEmptyArray){
// rest of the codes ...
}
The result of comparison on if(anEmptyArray) is always true with an empty array.
solution3
0 2022-08-09 22:45:05
the simplest way is just to add "this.state.weather &&" before map method, first it will make sure that "this.state.weather" is defined and then run the code, example is below
{this.state.weather && this.state.weather.map((element) => { return ( <div className="col-md-4"> <Body city={element.location.name} /> </div> ); })}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.