javascript - Using props in react -

im building app data api , want include users latitude , longitude in app.

my app in 2 files: app.js , main.js

in app.js render component this:

render(<main source="https://api.darksky.net/forecast/apikey/latitude,longitude?units=auto"/>, document.getelementbyid('app')); 

the latitude , longitude hardcoded in component source, , want make these dynamic.

in main.js component uses api this:

componentdidmount() {  this.serverrequest = $.get(this.props.source, function (result) {   this.setstate({     daily: result.daily.data,     hourly: result.hourly.data   });  }.bind(this)); } 

im able fetch users location using html geolocation - guess should store in constructor or componentwillmount, need way send variable app.js file in source main component - guess should use props source dont know how

it may approach pass longitude , latitude component props , assemble url inside component:

render(<main longitude={longitude} latitude={latitude} />, document.getelementbyid('app')); 

---

componentdidmount() {     const url = `https://api.darksky.net/forecast/apikey/${this.props.latitude},${this.props.longitude}?units=auto`;     this.serverrequest = $.get(url, function (result) {         this.setstate({             daily: result.daily.data,             hourly: result.hourly.data         });     }.bind(this)); }