如何在 react-google-maps/api 的 InfoWindow 内容中触发 function 按钮 onClick？

Question

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 onLoad = 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}
        onLoad={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;

Answer 1

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

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