Pfthb

I can not set state in this code. I understand it because I did not bind the function getvalue. Otherwise I cannot call this.radius. I this code this.radius is 5000. If I changed it to

 getvalues = (e)=> console.log(e) 

it returns undefined.

So what do I need to do

class Mapspage extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 location: lat: 52.2387683, lng: 5.8322737 ,
 position: ,
 radius: 5000,
 ;
 

 getvalues(e) 
 this.setState('radius': this.radius);
 

 render() 
 const MapWithAMarker = withGoogleMap(props => (
 <GoogleMap
 defaultZoom=11
 defaultCenter=this.state.location
 >
 <Circle
 radius=this.state.radius
 editable=true
 onRadiusChanged=this.getvalues
 onDragEnd=this.getvalues
 draggable=true
 visible=true
 center=this.state.location
 />
 </GoogleMap>
 ));

 return (
 <div className="box box-default">
 <MapWithAMarker
 containerElement=<div style= height: `400px` />
 mapElement=<div style= height: `100%` />
 />
 </div>
 );
 

I found the answer. You need to ref the circle component and then you can call the getValues function. Also you need tot return false the shouldComponentUpdate

This is the code

class Mapspage extends React.Component 
 constructor(props) 
 super(props);

 this.state = 
 location: lat: 52.2387683, lng: 5.8322737 ,
 position: ,
 radius: 5000
 ;
 
 mapMounted = ref => 
 this.map = ref;
 ;

 shouldComponentUpdate(nextProps, nextState) 
 return false;
 

 getvalues = e => 
 const radius = this.map.getRadius();
 const center = this.map.getCenter();
 this.setState( radius: radius );
 this.setState(
 "location.lat": center.lat(),
 "location.lng": center.lng()
 );
 ;

 render() 
 const MapWithAMarker = withGoogleMap(props => (
 <GoogleMap defaultZoom=11 defaultCenter=this.state.location>
 <Circle
 ref=this.mapMounted.bind(this)
 radius=this.state.radius
 editable=true
 onRadiusChanged=props.getval
 onDragEnd=props.getval
 draggable=true
 visible=true
 center=this.state.location
 />
 </GoogleMap>
 ));

 return (
 <div className="box box-default">
 <MapWithAMarker
 getval=this.getvalues.bind(this)
 containerElement=<div style= height: `400px` />
 mapElement=<div style= height: `100%` />
 />
 </div>
 );
 

Please try this, the issue seems to be with binding.

class Mapspage extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 location: lat: 52.2387683, lng: 5.8322737 ,
 position: ,
 radius: 5000,
 ;
 

 getvalues = (e) => 
 this.setState(radius: this.radius);
 

 render() 
 const MapWithAMarker = withGoogleMap(props => (
 <GoogleMap
 defaultZoom=11
 defaultCenter=this.state.location
 >
 <Circle
 radius=this.state.radius
 editable=true
 onRadiusChanged=this.getvalues
 onDragEnd=this.getvalues
 draggable=true
 visible=true
 center=this.state.location
 />
 </GoogleMap>
 ));

 return (
 <div className="box box-default">
 <MapWithAMarker
 containerElement=<div style= height: `400px` />
 mapElement=<div style= height: `100%` />
 />
 </div>
 );