React Props not populated

Question

Trying to learn React and following this tutorial:https://youtu.be/GDa8kZLNhJ4?t=3547

There you have a App.js component that makes Travel Advisor API call that populates the data object:

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";
import { PlaceSharp } from "@material-ui/icons";

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

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

  return (
    <>
      <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>
    </>
  );
};

export default App;

The following props are passed to Map component:

         <Map
            setCoordinates={setCoordinates}
            setBounds={setBounds}
            coordinates={coordinates}
          />

In Map component it gets passed to GoogleMapReact component:

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 = ({setCoordinates, setBounds, coordinates}) => {

  const classes = useStyles()
  const isMobile = useMediaQuery('(min-width: 600px)')
  
  //console.log(coordinates)
  //const coordinates= {lat: 0, lng: 0}
  
  return (
    <div className={classes.mapContainer}>
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'xxxxxxxxxxxxxxxxxxxx'}}
            defaultCenter ={coordinates}
            center = {coordinates}
            defaultZoom = {14}
            margin = {[50, 50, 50, 50]}
            options = {''}
            onChange = {(e) => {
              console.log(e) // this is empty but it should have data
              setCoordinates({lat: e.center.lat, lng: e.center.lng});
            
            }}
          
            onChildClick = {''}
        >

        </GoogleMapReact>
    </div>
  )
}

export default Map

For some reason coordinates prop is not populated in onChange as seen in the video. I double check the code and cannot find what is stopping it from getting the data.

The API call returns a bunch of restaurants like this:

So it is fetching the data. Only props {coordinates} not getting filled. Can you see where can be the issue?

Answer 1

There are two pieces of state that handle some state. Those are places and coordinates. Once the App component is loaded, it tries to fetch places and update its state, triggering a re rendering. So far, so good.

The Map Component receives as prop the value of coordinates. coordinates never changes in the flow of the snippet that you posted. Maybe you want to fetch some coordinates from another endpoint? Or maybe from the places data, map through it and set a new state?. Same applies for bounds.

What it looks like it is missing is a call to setCoordinates and setBounds with the new values.