I am trying to trigger the function reportPost() on the button onClick which is located in the infoWindow element. When I click on the marker icon and infoWindow starts to render, the function triggers itself and when the window is already loaded, the button does not work (can't trigger func). How can I prevent this and fix the button?

import { useState, useEffect, useCallback } from "react";
import {
  GoogleMap,
  useJsApiLoader,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";
import Axios from "axios";

import markerIcon from "../images/markerIcon.png";

const containerStyle = {
  width: "100%",
  height: "100%",
};

const options = {
  mapId: process.env.MAP_ID,
  streetViewControl: false,
};

const center = {
  lat: 52.22611704066942,
  lng: 19.357910156250004,
};

function Map() {
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    Axios.get("http://localhost:3001/api/markers").then((response) => {
      setMarkers(response.data);
    });
  }, []);

  function reportPost(markerid) {
    console.log(markerid);
  }

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  });

  const onl oad = useCallback(function callback(map) {
    setMap(map);
  }, []);

  const onUnmount = useCallback(function callback(map) {
    setMap(null);
  }, []);

  const [map, setMap] = useState(null);

  const [activeMarker, setActiveMarker] = useState(null);

  const handleActiveMarker = (marker) => {
    setActiveMarker(marker);
  };

  return isLoaded ? (
    <div className="w-100 h-hero flex">
      <GoogleMap
        mapContainerStyle={containerStyle}
        options={options}
        center={center}
        zoom={6}
        onl oad={onLoad}
        onUnmount={onUnmount}
      >
        {markers.map(
          (
            { markerid, latitude, longitude, description },
            i,
            arr
          ) => {
            const position = {
              lat: latitude,
              lng: longitude,
            };

            return (
              <Marker
                key={markerid}
                icon={markerIcon}
                position={position}
                onClick={() => handleActiveMarker(markerid)}
              >
                {activeMarker === markerid ? (
                  <InfoWindow
                    onCloseClick={() => setActiveMarker(null)}
                  >
                      <div>
                          <div>
                            {description}
                          </div>
                        <div>
                          <button
                            onClick={reportPost(markerid)}
                          >
                            Report Post
                          </button>
                        </div>
                      </div>              
                  </InfoWindow>
                ) : null}
              </Marker>
            );
          }
        )}
      </GoogleMap>
    </div>
  ) : null;
}

export default Map;

CodePudding user response：

I think the onclick needs a callback, you can try doing it this way:

<button onClick={() => reportPost(markerid)}>
    Report Post
</button>