render() {
const { showingInfoWindow, activePosition, selected } = this.state;
return (
<Map
google={this.props.google}
zoom={8}
initialCenter={{ lat: 89, lng: -53 }}
>
{this.displayMarkers()}
{showingInfoWindow ? (<InfoWindow position={this.state.activePosition} visible={this.state.showingInfowindow} onClose={this.onClose}>
<div>
<bold>Title: </bold>
{this.state.selected.title}
</div>
<div>
<bold>Description: </bold>
{this.state.selected.description}
</div>
</InfoWindow>) : null}
</Map>
);
}
I checked other answers and it seems this error message means I am providing more than one child react element to InfoWindow, but I don't see how I am doing that. It'd make sense if the error message were directed to Map with all the Marker children elements, any help would be appreciated
That is exactly what that error/warning message means.
InfoWindow.propTypes = {
children: PropTypes.element.isRequired, // <-- allows single child only
map: PropTypes.object,
marker: PropTypes.object,
position: PropTypes.object,
visible: PropTypes.bool,
// callbacks
onClose: PropTypes.func,
onOpen: PropTypes.func
}
You can wrap them in a div or Fragment
{showingInfoWindow ? (
<InfoWindow position={this.state.activePosition} visible={this.state.showingInfowindow} onClose={this.onClose}>
<Fragment>
<div>
<bold>Title: </bold>
{this.state.selected.title}
</div>
<div>
<bold>Description: </bold>
{this.state.selected.description}
</div>
</Fragment>
</InfoWindow>)
: null
}