text #react #componentDidMount

Posted 2021-04-30

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay';
import SearchBar from './SearchBar';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { lat: null, errMessage: '', long: null };

    }
    componentDidMount() {
        window.navigator.geolocation.getCurrentPosition(
            (position) => {
                console.log(position);
                this.setState({ lat: position.coords.latitude, long: position.coords.longitude });
            },
            (err) => {
                console.log(err);
                this.setState({ errMessage: err.message })
            }
        )

    }
    render() {
        if (this.state.errMessage && !this.state.lat) {
            return (
                <div>
                    error : {this.state.errMessage}
                </div>
            )
        }
        else if (!this.state.errMessage && this.state.lat) {
            return (
                <div>Long : {this.state.long}, Lat: {this.state.lat}  </div>
            )
        }
        return (
            <div className="ui active inline loader">Loading position ..</div>
        )
    }
}

ReactDOM.render(<App />, document.querySelector('#root'));