Changing state does not trigger render - reactjs

Question

I'm having a small issue with a component implementation.
Find the code below
var AroundMe = React.createClass({
getInitialState: function(){
return({
dances: [],
events: this.props.events,
user_coords: {}
})
},
update_events: function(data){
this.setState({events: data});
},
filter_by_geolocation: function(){
var vm = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}});
$.ajax({
url: "/aroundme.json",
datatype: 'JSON',
data: vm.state.user_coords,
method: 'GET'
}).done(function(response){
vm.update_events(response.aroundme);
}.bind(vm));
});
} else {
console.log("geo not supported")
}
},
render: function() {
return(
<div>
<button onClick={this.filter_by_geolocation} className='btn btn-danger'>Locate me</button>
<EventsList events={this.state.events} />
</div>
);
}
});
Clicking on the button changes the events state but does not send the new value to to the Eventslist component.
What did I do wrong?
Thanks for your help!
cheers

Answer 1

I have a hunch. setState is asynchronous so you need to use a callback.
Change this:
vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}});
$.ajax({
url: "/aroundme.json",
datatype: 'JSON',
data: vm.state.user_coords,
method: 'GET'
}).done(function(response){
vm.update_events(response.aroundme);
}.bind(vm));
To this:
vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}}, function() {
$.ajax({
url: "/aroundme.json",
datatype: 'JSON',
data: vm.state.user_coords,
method: 'GET'
}).done(function(response){
vm.update_events(response.aroundme);
}.bind(vm));
});