Pass an array when it changes from parent to child

Question

I'm trying to get with nearbySearch from Google Maps API the places that are near to me and send this data to my child component for put markers in map.

This is the function where I call Google Service Nearby Search and it prints the correct data in the console.log

const handleZoomChanged = () => {
   let lat = map.mapUrl.split('=')[1].split('&')[0].split(',')[0];
   let lng = map.mapUrl.split('=')[1].split('&')[0].split(',')[1];

   let places = getNearby(lat, lng);
   console.log('places', places);

   console.log('length', places.length); //EDIT: I tried to get the length of the array and get 0


   return (
      <MainMarkersGoogle places={places} />
   )
}

But the return it seems not to call the child component and send the data.

I call this function in parent component:

export const MainMap = () => {
  const renderMap = () => {
    return(  
      <GoogleMap
        id="map"
        onLoad={map => {setMap(map)}}
        zoom={15}
        center={center}
        onZoomChanged={handleZoomChanged}>

      </GoogleMap>
    )
  }

  return isLoaded ? renderMap() : 'Loading...'
}

This is the child component:

/* global google */
export const MainMarkersGoogle = ( places )  => {

    const [markers, setMarkers] = useState([]);
    
    useEffect(() => {
      console.log('child', places)

      setMarkers(places)
    }, [places])

    return(    
      {markers.map(({ id, geometry, name }) => (
          <Marker
            key={id}
            position={geometry.location}
            animation={google.maps.Animation.DROP}
            onClick={() => console.log(id) }
            title={name}
          >
          </Marker>
        ))}
    )
}

The console.log from useEffect don't appear and markers are not shown in the map.

I tried to receive the child component with

export const MainMarkersGoogle = ({places}) => {

and

export const MainMarkersGoogle = places => {

getting the same result.

EDIT: I show the function getNearby too, maybe the problem is inside this function but i can't find where:

function getNearby(lat, lng) {

  let places;

  var config = {
      method: 'get',
      url: `MY_URL`,
      headers: { }
    };
    
  axios(config)
  .then(function (response) {
      console.log(response.data);
      for(let i = 0; i < response.data.results.length; i++) {
          if(response.data.results[i].business_status === 'OPERATIONAL')
              places.push(response.data.results[i])
      }
  })
  .catch(function (error) {
    console.log(error);
  });
  
  return places;   
}

If you need more info of my code, ask me and I will edit this.

Answer 1

Check the docs of Google Maps for react, onZoomChanged is a void event listener. It is not supposed to return an element https://react-google-maps-api-docs.netlify.app . One way to do this would be to update a state variable with the places and have the component already mounted. Of course you can big-brain this and find other ways to achieve the same result. Also you are updating places inside a Promise and return places outside of the Promise so the moment you return them they are empty because the Promise is not resolved. Try to use async-await to achieve a blocking-like effect.