render different icons depending on boolean props inside a tooltip - reactjs

Question

so i have this situation which i have a bar that map over data and renders an boxes with some icons, and each of them has it boolean prop that defines if the icons should be rendered.
BoxBar.tsx map over some data and renders a single box component, like so:
const renderSingleBox = (item: any) => {
return (
<SingleBox
subsystem={item.subsystem}
serviceState={item.serviceState}
isSimulatorMode={item.isSimulatorMode}
/>
);
};
const renderIconBoxes = () => (
<Wrapper>{data.map(item => renderSingleBox(item))}</Wrapper>
);
SingleBox.tsx renders some icons,
like so:
const renderIconBox = () => {
return (
<IconBox>
<Tooltip message="Test" position={Position.Bottom} asPortal={true} cursor="pointer">
{isSimulatorMode && <SimulatorModeIcon />}
{isRemoteMode && <FontAwesomeIcon icon={faWifiSlash} size="sm" fontSize={16} />}
{isServiceMode && <ServiceIcon />}
{isResetIconVisible && (
<FontAwesomeIcon icon={faUndo} size="sm" fontSize={16} color={colors.primary} />
)}
</Tooltip>
</IconBox>
);
};
But i need the Tooltip component to display the text message corresponding to the prop name itself,
for example, if the prop isSimulatorMode is true and the icon is displayed, the Tooltip should render the message isSimulatorMode
I hope its clear what i'm trying to get here.
I was thinking of maybe create a Map, something like this:
const MapPropsToElements = new Map<string, JSX.Element>([
["isSimulatorMode", <SimulatorModeIcon />],
["isRemoteMode", <FontAwesomeIcon icon={faWifiSlash} size="sm" fontSize={16} />],
["isServiceMode", <ServiceIcon />],
[
"isResetIconVisible",
<FontAwesomeIcon icon={faUndo} size="sm" fontSize={16} color={colors.primary} />
]
]);
but still i don't know how to iterate on it and render it correctly.
any ideas?
can i create a dynamic map that renders icons ?
thanx

Answer 1

Try doing something like
const icons = [{name: 'isSimulatorMode', icon: <SimulatorModeIcon />}, {name: 'isServiceMode', icon: <ServiceIcon />}, ... ]