Injecting a component runtime

[dense lance]

This might not be next.js related, but I am using it in a next.js app so I am trying here. Let me know if I should try elsewhere.

I am making an app that has an image that fills the screen .This image is a "map" and when the user clicks different area of the map, different boxes are displayed.

I found two packages that helped me out. react-image-map and react-popup.

What I want now is to make components for the different boxes that should appear when clicked and display these. Is there a way to inject the Component at runtime into the popup box/div when the uses clicks the area?

Hope this makes sense...

Source code in next message

`
import React, { useState } from "react";
import { ImageMap, Area } from '@qiuz/react-image-map';
import Popup from "reactjs-popup";
import { Bank, Breeding } from './GameElements';

export function GameMap3 () {
const [open, setOpen ] = useState(false);
const closeModal = () => setOpen(false);

const img = '/game/map22-min.png';

const mapArea: Area[] = [
{
left: '32%',
top: '16%',
width: '16%',
height: '15%',
style: { background: 'rgba(255, 0, 0, 0.5)' },
onMouseOver: () => console.log('map onMouseOver bank'),
// Can I defined what component to display here maybe?
},
{
left: '36%',
top: '48%',
width: '16%',
height: '15%',
style: { background: 'rgba(255, 0, 0, 0.5)' },
onMouseOver: () => console.log('map onMouseOver stake'),
// Can I defined what component to display here maybe?
}
];

const onMapClick = (area, index) => {
const tip = click map${index + 1};
console.log(tip, area);
// And then here read what component to load
setOpen(true);
}
return (
<>
<ImageMap
className="usage-map"
src={img}
map={mapArea}
onMapClick={onMapClick}
/>
<Popup open={open} closeOnDocumentClick onClose={closeModal}>
<div className="modal">
<a className="close" onClick={closeModal}>
×
</a>
{/* And finally display it here??? */}
</div>
</Popup>
</>
)

}
`