Tengo una matriz de objetos en los que defino varios iconos que deben mostrarse.

 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 }];

Recorro la matriz y muestro todos los íconos dentro de un elemento div.

 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>;

Además de los íconos definidos, me gustaría mostrar algunos otros íconos según la pestaña seleccionada, para lo cual me gustaría agregar if-else dentro de la matriz. Intenté hacer algo como esto:

 { icon: <RefreshIcon />, onClick: onClickRefreshRulesGrid, isDisabled: false }, { if: { selectedTab:0 },then :[{ icon: `<DeploymentIcon />`, onClick: onClickDeploy, isDisabled: true }], else:[{ icon: `<DocumentExcelIcon />`, onClick: onClickUndeploy, isDisabled: true }] } ];

Pero esto no funcionó. ¿Es posible lograr algo como esto sin definir el conjunto completo del resto de los íconos dentro de la condición if-else?