Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

83
Visualizações
If-else inside array of objects using react

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 ?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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
  }
];
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda