I get this error in my ReactJS app that pulls places data.
it seems to me that the error shows when map()
points to null
TypeError: Cannot read property 'map' of undefined
I could not figure out a way to make a default value
and this is the code:
import React, {Component} from 'react';
// This component is for search list view, it render the props places data,
// And handle cilck for place item.
class SearchList extends Component {
render() {
// const {places, query, selectPlace} = this.props;
const {places,query,selectPlace} = this.props;
return (
<div className="container">
<hr/>
<div className="input-group">
<input
type="text"
className="form-control"
placeholder="Filter"
aria-label="Filter Input"
onChange={(event) => {
query(event.target.value);
}}
/>
<span className="input-group-addon">
<i className="fas fa-filter"></i>
</span>
</div>
<hr/>
<div style={{maxHeight: '82vh', overflow: 'scroll'}}>
<ul className="list-group">
{
places.map(place => (
<li
tabIndex="0"
key={place.id}
className="list-group-item list-group-item-action"
onClick={() => selectPlace(place)}>
<span>{place.name}</span>
</li>
))
}
</ul>
</div>
</div>
);
}
}
export default SearchList;
One can use the conditional rendering to render your places. Therefore if places
is undefined the right operand of the and operator (&&) will not be rendered
<ul className="list-group">
{
places && places.map(place => (
<li
tabIndex="0"
key={place.id}
className="list-group-item list-group-item-action"
onClick={() => selectPlace(place)}>
<span>{place.name}</span>
</li>
))
}
</ul>
This happens on the first render since most likely your places
comes from a resolved Promise somewhere which makes that prop undefined
. There is a way to fix this, defaultProps
.
SearchList.defaultProps = {
places: [],
}
However, if you're passing places
, like <SearchList places={this.state.places} />
you need to be sure that this.state.places
is undefined and not null
since a null value is valid and will override your defaultProps
. If you want to guard against that then you need to do the conditional rendering.
places && places.map()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With