React Props not populated

[aurora10]

App.js component that makes Travel Advisor API call that populates the data object:

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: 'AIzaSyDRtM04BLKwgBtvMIXRD1xRPe1bdHSUDmo'}}
            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 Mapconst 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;

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:

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: 'AIzaSyDRtM04BLKwgBtvMIXRD1xRPe1bdHSUDmo'}}
            defaultCenter ={coordinates}
            center = {coordinates}
            defaultZoom = {14}
            margin = {[50, 50, 50, 50]}
            options = {''}
            onChange = {(e) => {
              console.log(e) // this is empty
              setCoordinates({lat: e.center.lat, lng: e.center.lng});
              
            }}
          
            onChildClick = {''}
        >

        </GoogleMapReact>
    </div>
  )
}

export default Map

The API call returns a bunch of restaurants, so the call works. But I cannot get {coordinates} prop populated....

[shivendra8004]

Hey bro @aurora10 i can feel your pain i also got stuck on same place, to resolve this error do what i said below

1. const [coordinates, setCoordinates] = useState({}); // Here add coordinates of any place for eg. const [coordinates, setCoordinates] = useState({ lat: 0, lng: 0 });

2. const [bounds, setBounds] = useState(null); // Instead of null replace it by {} for eg. const [bounds, setBounds] = useState({});

If your error get resolved than mark this issue as resolved. @adrianhajdin