Description
Describe the bug
I have created a react webpart utilising the react-img-mapper,
I collect the MAP data from some PropertyFieldCollectionData fields then build the MAP const based the fields values
During gulp serve testing, this works perfectly, however when I deploy to a site collection and configure the webpart part, on the first visit to the page the image displays but the MAP areas do not work.
After a refresh (F5) of the browser the MAP areas work, however if I do a hard refresh of the browser (CTRL+ F5) or close the browser and go back to the page the MAP areas are inactive again.
I know the MAP const has been created due to the console.log displayed in the render area.
This is the code I am using in the .tsx file
Webpart .tsx code
`
export interface IReactImageMapState {
mapArray: string;
}
export default class ReactImageMap extends React.Component<IReactImageMapProps, IReactImageMapState > {
constructor(props) {
super(props);
this.state = {
mapArray: "",
};
this.getMapInfo();
}
private getMapInfo(): void {
if (this.props.collectionData) {
let mapInfoData = this.props.collectionData.map((mapinfo, i) => {
if (mapinfo.href == null || mapinfo.href == "") {
return `{"shape":"${mapinfo.Shape}","coords":[${mapinfo.Coords}],"fillColor":"${mapinfo.fillColor}${mapinfo.fillTransparency}","strokeColor":"rgba(0,0,0,0)"}`;
} else {
return `{"shape":"${mapinfo.Shape}","coords":[${mapinfo.Coords}],"fillColor":"${mapinfo.fillColor}${mapinfo.fillTransparency}","href":"${mapinfo.href}","strokeColor":"rgba(0,0,0,0)"}`;
}
});
this.setState({
mapArray: JSON.parse(`{"name":"my-map","areas":[` + String(mapInfoData) + `]}`)
});
}
}
public componentDidUpdate(prevProps, prevState): void {
if (prevProps.collectionData !== this.props.collectionData) {
this.getMapInfo();
}
}
public componentDidMount(): void {
this.getMapInfo();
}
public render(): React.ReactElement<IReactImageMapProps> {
const URL = encodeURI(this.props.imageUrl);
const MAP = this.state.mapArray;
console.log("URL: " + URL);
console.log("MAP: " + MAP);
if (URL == "undefined") {
return (
<div className={styles.reactImageMap} >
<div className={styles.container} >
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>React Image Map Webpart</span>
<p>Open the property pane to configure this webpart</p>
</div>
</div>
</div>
</div>
);
} else {
if (URL && MAP) {
return (
<div className={styles.reactImageMap} >
<div className={styles.container} >
<span>URL & MAP</span>
<div>
<ImageMapper
src={URL}
map={MAP}
responsive={true}
parentWidth={this.props.webPartWidth}
/>
</div>
</div>
</div>
);
} else {
return (
<div className={styles.reactImageMap} >
<div className={styles.container} >
<span>URL</span>
<div>
<ImageMapper
src={URL}
responsive={true}
parentWidth={this.props.webPartWidth}
/>
</div>
</div>
</div>
);
}
}
}
}
`
Expected behavior
Expected behaviour is that on the first visit to the page the MAP areas work
Desktop (please complete the following information):
- OS: Windows
- Browser: Chrome
- Version: [e.g. 22]
Additional context
Add any other context about the problem here.