React Javascript Geolocation API

reactjsGeoLocationAPI.txt

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [coords, setCoords] = useState({
    latitude: null,
    longitude: null,
  });

  // Geo Location API

  async function fetchGeoLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, onError);
    } else {
      console.log("😢 Tarayıcınız Geolocation desteklemiyor!");
    }
  }

  function success(position) {
    const { latitude, longitude } = position.coords;

    setCoords({ latitude, longitude });

    console.log(
      ` 😎 Geo Location Response :  Latitude: ${latitude} °, Longitude: ${longitude} °`
    );
  }

  function onError(error) {
    console.error(`😢 Error : ${error}`);
  }

  useEffect(() => {
    fetchGeoLocation();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <div>
          <div draggable={true}>
            <h1>Geolocation API </h1>
          </div>
          <p draggable="true">
            Latitude: {coords.latitude} °, Longitude: {coords.longitude} °`
          </p>
          <h3>Furkan Türkyılmaz</h3>
        </div>
      </header>
    </div>
  );
}

export default App;