ReactjS - const loads all states before being fetched - reactjs

Question

Hey guys I am trying to pass a URL for background image into the ResultsItem component. My problem is that the state of places is not defined until data are fetched. The problem is with the const Thumbnail. I always get an error of "TypeError: Cannot read property 'photos' of undefined".
render() {
const Thumbnail = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${places.photos.photoreference}&key=MYAPIKEY
`;
return (
<div>
<div className="flex align-center">
<div className="search">
<SearchInput
id="autocomplete"
placeholder="Search by address"
width="100%"
height={56}
/>
<Script
url="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=places,geometry&callback=initAutocomplete"
onLoad={this.handleScriptLoad}
/>
</div>
<div className="current-location">
<Tooltip content="Use current location">
<IconButton
icon="locate"
iconSize={16}
height={32}
onClick={this.currentLocationOnClick}
>
{this.state.lat} & {this.state.lng}
</IconButton>
</Tooltip>
</div>
</div>
<div className="results">
{this.state.places.map(places => (
<div className="results-item" onClick={this.props.sideBarOpen}>
<ResultsItem name={places.name} image={Thumbnail} />
</div>
))}
</div>
</div>
);
}
}

Answer 1

The fact that places is available in an async manner, the best solution is to resolve Thumbnail within the map function itself.
That way it will only be required and resolved when places is available
render() {
return (
<div>
<div className="flex align-center">
<div className="search">
<SearchInput
id="autocomplete"
placeholder="Search by address"
width="100%"
height={56}
/>
<Script
url="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=places,geometry&callback=initAutocomplete"
onLoad={this.handleScriptLoad}
/>
</div>
<div className="current-location">
<Tooltip content="Use current location">
<IconButton
icon="locate"
iconSize={16}
height={32}
onClick={this.currentLocationOnClick}
>
{this.state.lat} & {this.state.lng}
</IconButton>
</Tooltip>
</div>
</div>
<div className="results">
{this.state.places.map(places => {
const Thumbnail = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${places.photos.photoreference}&key=MYAPIKEY
`;
return(
<div className="results-item" onClick={this.props.sideBarOpen}>
<ResultsItem name={places.name} image={Thumbnail} />
</div>
)})}
</div>
</div>
);
}
}

Answer 2

You should prevent to load data before they are actually loaded from server, so you should render a loader before use your result in this way:
if(isLoading) { // You should set the loading state before to load data from server
return <span>Loading</span>
}
return ( // This shows your data after loading goes to false
<div>Your code here</div>
)