Not able to call a method from InfoWindow in react js-CodePudding

I am trying to call a method on click of an element. The HTML is stored in a variable. It looks like below:

var cont = '<div  onClick="clickPoly(' index  ')" style="width:100px;" >View More</div>';

const clickPoly = (index) => {
   var square = coordinates[index];
  
   if(square != undefined){
      square.dispatchEvent('click');
   }
}

clickPoly() should be called onclick of html above. But when I click on "View More", it shows "clickPoly is not defined".

Basically, I am showing multiple polygons on google map and on hover of each polygon I am showing infowindow. In infoWindow I need to show "View More" button and show relevant content.

You can see full code here

CodePudding user response：

clickPoly needs to be defined on window.

window.clickPoly = (index) => {
  var square = coordinates[index];

  if (square != undefined) {
    square.dispatchEvent("click");
  }
};

alternatively, pass an HTMLElement to infowindow.setContent(element) and add the event in your component

var cont = '<div  data-inx="' index '" onClick="clickPoly(' index  ')" style="width:100px;" >View More</div>';

becomes

const cont = document.createElement('div').
cont.classList.add('infocontent2');
cont.addEventListener(() => clickPoly(index));
// add aria-label
cont.style.width = '100px';
cont.innerText = 'View More'