React OnClick inside stateless function does not work

Question

I am using react-google-maps to make a map with markers that show InfoWindows, where you are able to press a button to print something to the console. I use the following code, but the onClick does not execute the function:

function Map() {

  const [selectedKalas, setSelectedKalas] = useState(null);
  const [data, setData] = useState({ hits: [] });

  function sendMergeRequest() {
    console.log("Sender merge request");
  };

  /* Fetching some data... */

   useEffect(() => {
    const fetchData = async () => {
      const result = await axios(database_url_coordinates);
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <GoogleMap>
      {
        data.data.map(kalasobjekt => {
          if (kalasobjekt.username !== "admin" && kalasobjekt.kalas !== null) {
            return (
                  <Marker
                    key={kalasobjekt.kalas.id}
                    position={{
                      lat: parseFloat(kalasobjekt.kalas.lat),
                      lng: parseFloat(kalasobjekt.kalas.lng)
                    }}
                    onClick={() => {
                      setSelectedKalas(kalasobjekt);
                    }}
                  />
                )}
            );
          }
        }))
      }
      {selectedKalas && (
        <InfoWindow
          position={{
            lat: parseFloat(selectedKalas.kalas.lat),
            lng: parseFloat(selectedKalas.kalas.lng)
          }}
          onCloseClick={() => {
            setSelectedKalas(null);
          }}
        >
              <div>
                <h2>{selectedKalas.username}</h2>
                <p>Eier: {selectedKalas.kalas.fullName}</p>
                <p>Kapasitiet: {selectedKalas.kalas.capacity}</p>
                <div className="submitData">
                  <button onClick={sendMergeRequest}>
                    Merge hos {selectedKalas.username}!
                  </button>
                </div>
              </div>

        </InfoWindow>
      )}
    </GoogleMap>
  );
}

I have been searching around and trying to understand why this doesn't work but cant seem to find any good anwsers. I hope

Answer 1

Try something like this:

function Hello() {
    const handleClick = function handle(){
        alert('Btn is clicked');
    }

  return (
        <div>
            <button onClick={ handleClick }>Click Me</button>
        </div>
    )
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Working fiddle