Difficulty storing values in const and maintain state of the inputted value ( not props)

Question

as a first-time beginner project, I decided to use google maps API to create a simple place input, return distance react project. I found a nice tutorial from youtube where I learned this. However, I run into a problem when I try to store {coordinates.lng} and {coordinates.lat} in a const to use it to calculate distance later using Google maps API. I tried creating its own add function and calling it but it doesn't work. Somewhere my understanding is flawed and I tried to pinpoint it but I really don't understand. How do I store the values of {coordinates.lat} and {coordinates.lng} ?

import React from "react";
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from "react-places-autocomplete";

export default function Itinerary() {
  const [address, setAddress] = React.useState("");
  const [coordinates, setCoordinates] = React.useState({
    lat: null,
    lng: null
  });

  const add = (coordinates) => {
  const Latitude= {coordinates.lat};
  console.log(Latitude);
  };

  const handleSelect = async value => {
    const results = await geocodeByAddress(value);
    const latLng = await getLatLng(results[0]);
    setAddress(value);
    setCoordinates(latLng);
  };

  return (
    <div className="container">
    <div className="row">
    <div className="col-md-6 mt-5 mx-auto">
      <PlacesAutocomplete
        value={address}
        onChange={setAddress}
        onSelect={handleSelect}
       >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <h1>Latitude: **{coordinates.lat}**</h1>
            <h1>Longitude: **{coordinates.lng}**</h1>
            <h1> {console.log({coordinates.lng}}</h1>
            <input size="50" height="40"{...getInputProps({ placeholder: "Type address" })} />
            {add(coordinates)}
            <div>
              {loading ? <div>...loading</div> : null}

              {suggestions.map(suggestion => {
                const style = {
                  backgroundColor: suggestion.active ? "#41b6e6" : "#fff"
                };

                return (
                  <div {...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    </div>
    </div>
    </div>
  );
}

score 1 · Answer 1 · answered Jun 19 '20 at 16:34

1

To define the schema of a location,

place:{
      name: 'NameOfThePlace',
      location:{
          type:'Point',
          coordinates:[long,lat]
         }
       }

This is the object of a location, where in, your latitude and longitude is in the form of an array. After creating the place object, you can also put them inside a places array, if you choose multiple places. This format also supports mongodb structure for save and retrieval.

answered Jun 19 '20 at 16:34

Vijay122

884
8
12

I happen to be using sql with sequelize for the backend. Is there any way to storing this in a 2D array ? – L m Jun 19 '20 at 16:44
I think sql handles it with a datatype. kindly look at this example [link](https://stackoverflow.com/questions/30322924/how-to-store-longitude-latitude-as-a-geography-in-sql-server-2014) – Vijay122 Jun 19 '20 at 17:01

Difficulty storing values in const and maintain state of the inputted value ( not props)

1 Answers1