In my app I implemented a module that get's latidude and longitude of my current position and now I want to export this data to googlemap components somehow so the default position would be overwritten by my current one.
Here is my code structure: location.js
import React from 'react';
import {geolocated} from 'react-geolocated';
class Demo extends React.Component {
render() {
return !this.props.isGeolocationAvailable
? <div>Your browser does not support Geolocation</div>
: !this.props.isGeolocationEnabled
? <div>Geolocation is not enabled</div>
: this.props.coords
? <table>
<tbody>
<tr><td>latitude</td><td>{this.props.coords.latitude}</td></tr>
<tr><td>longitude</td><td>{this.props.coords.longitude}</td></tr>
</tbody>
</table>
: <div>Getting the location data… </div>;
}
}
export default geolocated({
positionOptions: {
enableHighAccuracy: false,
},
userDecisionTimeout: 5000,
})(Demo);
My googlemap file:
import React from 'react';
export default class GoogleMap extends React.Component{
constructor(){
super();
this.state = {
zoom: 13,
maptype: 'roadmap',
lat: -33.8688,
lng: 141.2195
}
}
componentDidMount(){
let map = new window.google.maps.Map(document.getElementById('map'), {
center: {
lat: this.state.lat,
lng: this.state.lng},
zoom: 13,
mapTypeId: 'roadmap',
})
console.log('loaded')
}
render(){
return(
<div>
<div id='map' />
</div>
)
}
}
And finally my app.js file (the important bits):
import GoogleMap from './components/map';
import Demo from './components/local'
class App extends Component {
render(){
return(
<div> <Demo /> <GoogleMap /> </div>)
I know I have to somehow export the state between parent and then children, but I got really confused there on bigger project and got completely lost when working with 3rd party libs