Dynamic coordinates are not resized according to Screen size.

[akshaypjoshi]

In React,

If we used the static coordinates in map tag, it works and we get updated coordinates according to screen size. But In case of dynamic coordinates that are set in react state or props, these coordinates never changed.

   <img
       src={imageSrc}
       useMap="#imageMap"
       alt={"Image"}
       width={'auto'}
       height={`${containerHeight}px`}
   />
   
   <map name="imageMap">
      { coordinatesArray.map( coordinate => {
             <area
                   onClick={() => this.onClickEvent}
                   href={"javascript:void(0)"}
                   coords={`${coordinate.topLeftX},${coordinate.topLeftY},${coordinate.bottomRightX},${coordinate.bottomRightY}`}
                   shape="rect"
            />
       }
      }
   </map>

[davidjbradshaw]

Not a supported use case, you would need to delete …resize from the HTML node and then recall the setup function every time you change those values

[akshaypjoshi]

@davidjbradshaw Can you show me some snippet? How that will work?

[akshaypjoshi]

@davidjbradshaw I have used imageMapResizer() function in componentDidMount but its not working. It overrides when HTML re-renders.