fix: fix htmlmarker poopup change props (#27)

src/examples/PopupExample.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Button } from '@material-ui/core'
 import {
   AzureMap,
@@ -10,6 +10,7 @@ import {
 } from 'react-azure-maps'
 import { AuthenticationType, data } from 'azure-maps-control'
 import { key } from '../key'
+import HtmlMarker from 'azure-maps-control';
 
 const popupOptions = {
   position: new data.Position(-100.01, 45.01)
@@ -20,10 +21,11 @@ const PopupExample: React.FC = () => {
   const [isHtmlMarkerPopupVisible, setIsHtmlMarkerPopupVisible] = useState(
     true
   )
+  const [someHtmlMarkerPopupState, setSomeHtmlMarkerPopupState] = useState(0)
   const htmlMarkerOptions = {
     popup: useCreatePopup({
       options: {},
-      popupContent: <div style={wrapperStyles.popupStyles}>Hello World Html marker popup</div>
+      popupContent: <div style={wrapperStyles.popupStyles}>Hello World Html marker popup with some random value click Change Number to see actual value <br /> {someHtmlMarkerPopupState}</div>
     })
   }
   const option: IAzureMapOptions = useMemo(() => {
@@ -39,19 +41,19 @@ const PopupExample: React.FC = () => {
   }, [])
 
   const memoizedMapPopup = useMemo(() => (<AzureMapPopup
-      isVisible={isVisible}
-      options={popupOptions}
-      popupContent={
-        <div style={wrapperStyles.popupStyles}>Hello World</div>
-      }
+    isVisible={isVisible}
+    options={popupOptions}
+    popupContent={
+      <div style={wrapperStyles.popupStyles}>Hello World</div>
+    }
   />), [isVisible])
 
   const memoizedHtmlMarker = useMemo(() => (
-      <AzureMapHtmlMarker
-          isPopupVisible={isHtmlMarkerPopupVisible}
-          markerContent={<div className="pulseIcon"></div>}
-          options={htmlMarkerOptions}
-      />
+    <AzureMapHtmlMarker
+      isPopupVisible={isHtmlMarkerPopupVisible}
+      markerContent={<div className="pulseIcon"></div>}
+      options={htmlMarkerOptions}
+    />
   ), [isHtmlMarkerPopupVisible])
 
   const toggleHtmlMarkerPopup = useCallback(() => {
@@ -62,44 +64,52 @@ const PopupExample: React.FC = () => {
 
   return (
     <div style={wrapperStyles.map}>
-        <div style={wrapperStyles.buttonContainer}>
-          <Button
-            size="small"
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              toggleHtmlMarkerPopup()
-            }}
-          >
-            Toggle Popup HtmlMarker
+      <div style={wrapperStyles.buttonContainer}>
+        <Button
+          size="small"
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            toggleHtmlMarkerPopup()
+          }}
+        >
+          Toggle Popup HtmlMarker
           </Button>
-          <Button
-            size="small"
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              setIsVisible(true)
-            }}
-          >
-            Open Popup
+        <Button
+          size="small"
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            setIsVisible(true)
+          }}
+        >
+          Open Popup
           </Button>
-          <Button
-            size="small"
-            variant="contained"
-            color="secondary"
-            onClick={() => setIsVisible(false)}
-          >
-            Close Popup
+        <Button
+          size="small"
+          variant="contained"
+          color="secondary"
+          onClick={() => setIsVisible(false)}
+        >
+          Close Popup
           </Button>
-        </div>
-        <div style={wrapperStyles.map}>
-          <AzureMapsProvider>
-            <AzureMap options={option}>
-              {memoizedMapPopup}
-              {memoizedHtmlMarker}
-            </AzureMap>
-          </AzureMapsProvider>
-        </div>
+        <Button
+          size="small"
+          variant="contained"
+          color="secondary"
+          onClick={() => setSomeHtmlMarkerPopupState(Math.random() * 100)}
+        >
+          Change Popup HtmlMarker NUmber
+          </Button>
+      </div>
+      <div style={wrapperStyles.map}>
+        <AzureMapsProvider>
+          <AzureMap options={option}>
+            {memoizedMapPopup}
+            {memoizedHtmlMarker}
+          </AzureMap>
+        </AzureMapsProvider>
+      </div>
     </div>
   )
 }