Geolocation working

Geolocation.js

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// - Refactor App by creating a new component named `<GeoPosition>`
// - <GeoPosition> should use a child render callback that passes
//   to <App> the latitude and longitude state
// - When you're done, <App> should no longer have anything but
//   a render method
//
// Got extra time?
//
// - Now create a <GeoAddress> component that also uses a render
//   callback with the current address. You will use
//   `getAddressFromCoords(latitude, longitude)` to get the
//   address, it returns a promise.
// - You should be able to compose <GeoPosition> and <GeoAddress>
//   beneath it to naturally compose both the UI and the state
//   needed to render it
// - Make sure <GeoAddress> supports the user moving positions
///////////////////////////////////////////////////////////////////////////////

import React, { Component } from "react";
//const Component = React.Component;
import { render } from "react-dom";
import PropTypes from "prop-types";
import LoadingDots from "./utils/LoadingDots";
import getAddressFromCoords from "./utils/getAddressFromCoords";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

//Make GeoPosition component that takes props 'title' and pass it 'GeoPosition' that will render it as the h2 below the lat and long.

class App extends Component {
  render() {
    //Mapping stuff here
    return (
      <div>
        <h1>Geolocation</h1>

        <h2>GeoPosition</h2>
        <GeoPosition>
          {state =>
            state.error ? (
              <div>Error: {this.state.error.message}</div>
            ) : (
              <dl>
                <dt>Latitude</dt>
                <dd>{state.coords.latitude || <LoadingDots />}</dd>
                <dt>Longitude</dt>
                <dd>{state.coords.longitude || <LoadingDots />}</dd>
              </dl>
            )
          }
        </GeoPosition>
        <GeoPosition>{state => state.coords.latitude}</GeoPosition>
        <hr />
        <GeoPosition>{state => state.coords.longitude}</GeoPosition>
      </div>
    );
  }
}

class GeoPosition extends React.Component {
  state = {
    coords: {
      latitude: null,
      longitude: null
    },
    error: null
  };

  componentDidMount() {
    this.geoId = navigator.geolocation.watchPosition(
      position => {
        this.setState({
          coords: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          }
        });
      },
      error => {
        this.setState({ error });
      }
    );
  }

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.geoId);
  }

  render() {
    return this.props.children(this.state);
  }
}

render(<App />, document.getElementById("root"));