Having trouble in the setCoordinates function

Question

I am a newbie in React JS and I am following the below tutorial (application 1): https://www.youtube.com/watch?v=GDa8kZLNhJ4&list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR&index=10

Specifically from timestamp 56:37.

I have two files, App.js and Map.js

App.js code is as follows:

import React, {useState, useEffect} from "react";
import { CssBaseline, Grid } from "@material-ui/core";
import {getPlacesData} from "./api";

import Header from './components/Header/Header';
import List from './components/List/List';
import Map from './components/Map/Map';

const App = () => {
    const [places, setPlaces] = useState([]);

    const [coordinates, setCoordinates] = useState({});
    const [bounds, setBounds] = useState(null);

    useEffect(() => {      
        getPlacesData()
        .then((data) => {
            console.log(data);
            setPlaces(data);
        })
    }, []);

    return (
        <React.Fragment>
        <CssBaseline />
            <Header />
            <Grid container spacing={3} style={{ width: '100%'}}>
                <Grid item xs={12} md={4}>
                    <List />

                </Grid>

                <Grid item xs={12} md={8}>
                    <Map
                        setCoordinates = {setCoordinates}
                        setBounds = {setBounds}
                        coordinates = {coordinates}

                    />
                </Grid>

            </Grid>
        </React.Fragment>
    )
}

export default App;

Here is the code for Map.js:

import React from "react";
import GoogleMapReact from "google-map-react";
import { Paper, Typography, useMediaQuery } from "@material-ui/core";
import LocationOnOutlinedIcon from "@material-ui/icons/LocationOnOutlined";
import { Rating } from "@material-ui/lab";

import useStyles from "./styles";

const Map = ({coordinates, setCoordinates, setBounds}) => {
  console.log(coordinates)
  console.log(setCoordinates);
  const classes = useStyles();
  const isMobile = useMediaQuery("(min-width: 600px)");

  //const coordinates = {lat: 0, lng: 0}
  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "API KEY" }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={{}}
        onChange={(e) => {
          console.log(e);
          setCoordinates({ lat: e.center.lat, lng: e.center.lng});
        }}
        //onChildClick={""}
      >

      </GoogleMapReact>
    </div>
  );
};

export default Map;

I had initially set coordinates to:

const coordinates = {lat: 0, lng: 0}

When I had done that, I was getting my google map component rendered on the web-app and it was centered on lat: 0 and lng: 0.

Then I followed the tutorial and made the changes up to 59:58. After doing so, the map component was not being rendered. I did some console log and found out that the 'setCoordinates' function was not working and 'coordinates' was empty.

Answer 1

You're right that the coordinates is empty but there is no problem with setCoordinates because it never executed.

The reason is that you did not initialize the initial coordinates and it's just an empty object and the map never shows up so you never changed the map and onChange function never executed.

The Solution

const [coordinates, setCoordinates] = useState({lat: 0, lng: 0});