I have an array of objects where I define multiple icons that needs to be displayed.
const iconButtonList = [
{
icon: <AddIcon />,
onClick: onClickOpenRuleEditor,
isDisabled: false,
label:"Add"
},
{
icon: <EditIcon />,
onClick: onClickOpenRuleEditor,
isDisabled: isEditDisabled
},
{
icon: <CopyIcon />,
onClick: onClickCopyRules,
isDisabled: true
},
{
icon: <TrashIcon />,
onClick: onDelete,
isDisabled: isRemoveDisabled
},
{
icon: <RefreshIcon />,
onClick: onClickRefreshRulesGrid,
isDisabled: false
}];
I loop through through the array and display all the icons within a div element.
const gridActionButtons =
<div>
{
iconButtonList.map((element, index) => (
<IconButton
key={index}
flat
secondary
label={element.label}
icon={element.icon}
isDisabled={element.isDisabled}
onClick={element.onClick}/>)
)
}
</div>;
In addition to the icons defined, I would like to display few other icons based on the tab selected, for which I would like to add if-else within the array. I tried to do something like this:
{
icon: <RefreshIcon />,
onClick: onClickRefreshRulesGrid,
isDisabled: false
},
{
if: {
selectedTab:0
},then :[{
icon: `<DeploymentIcon />`,
onClick: onClickDeploy,
isDisabled: true
}],
else:[{
icon: `<DocumentExcelIcon />`,
onClick: onClickUndeploy,
isDisabled: true
}]
}
];
But this didn't work. Is it possible to achieve something like this without defining entire set of rest of the icons within if-else condition ?
You can do something like this:
{
icon: <RefreshIcon />,
onClick: onClickRefreshRulesGrid,
isDisabled: false
},
selectedTab === 0 ?
{
icon: `<DeploymentIcon />`,
onClick: onClickDeploy,
isDisabled: true
},
:{
icon: `<DocumentExcelIcon />`,
onClick: onClickUndeploy,
isDisabled: true
}
];