83
rated 0 times
[
88]
[
5]
/ answers: 1 / hits: 32822
/ 8 Years ago, tue, july 5, 2016, 12:00:00
I have a map app I built that requires some map icons to appear/disappear after a button press, but I can't figure out how to set it to re-render the component when I pass in a new sports property from it's parents component :
Parent loads component:
<SimpleMap sports=[default value and future values go here] />
Simple map component(simplified):
constructor(props) {
(props);
this.state = {
events: [{venue: {lat: 2, lon: 1}}],
sports: [baseball, football, paddle, soccer, boxing, dart, biking, golf, hockey, inline-skating, tennis, volleyball, skateboard, kickball, bowling, pool, ride, hike, ice-skating]
};
};
componentWillReceiveProps (nextProps) {
this.setState({events: [{venue: {lat: 2, lon: 1}}],
sports: nextProps.sports});
console.log(nextProps.sports);
}
static defaultProps = {
center: {lat: 36.160338, lng: -86.778780},
zoom: 12,
sports: [baseball, football, paddle, soccer, boxing, dart, biking, golf, hockey, inline-skating, tennis, volleyball, skateboard, kickball, bowling, pool, ride, hike, ice-skating],
};
makeMapEvents (insertProps) {
fetch(./json/meetup.json).then((response) => {
return response.json()
}).then((response) => {
/* eventually returns new events object based on insertProps */
this.setState({events: response});
}
};
componentDidMount () {
this.makeMapEvents(this.state.sports);
console.log(mounted, this.state.sports);
}
Eventually ends up here to map events from state:
<GoogleMap>
{this.state.events.map((result) => {
return (<Marker key={counter++} lat={result.venue.lat} lng={result.venue.lon}
sport={this.props.sport} data={result}/>);
})}
</GoogleMap>
More From » reactjs
