React - Versão 19.2

10 - Estrutura de escolha

Nesta aula, vamos aprender a utilizar a estrutura de escolha no React, usando o comando switch. Essa estrutura é ideal quando temos várias possibilidades baseadas em um mesmo valor.

---

1. Exemplo básico com switch

No exemplo abaixo, recebemos um nível e exibimos o nome correspondente:

// Componente
function Escolha({ nivel }) {

    // Estrutura de escolha
    switch (nivel) {
        case 1:
            return <h1>Safira</h1>;

        case 2:
            return <h1>Rubi</h1>;

        case 3:
            return <h1>Diamante</h1>;

        default:
            return <h1>Desconhecido</h1>;
    }
}

// Exportar
export default Escolha;

Explicação:

• O switch avalia o valor da variável nivel
• Cada case representa uma possibilidade
• O default é executado caso nenhum valor seja correspondente

---

2. Estrutura de escolha com texto

Também podemos utilizar switch com valores do tipo texto:

function EscolhaTexto({ status }) {

    switch (status) {
        case "ativo":
            return <h1>Usuário Ativo</h1>;

        case "inativo":
            return <h1>Usuário Inativo</h1>;

        case "bloqueado":
            return <h1>Usuário Bloqueado</h1>;

        default:
            return <h1>Status desconhecido</h1>;
    }
}

export default EscolhaTexto;

Explicação:

• O switch funciona normalmente com strings
• Esse formato é comum para status de usuários ou sistemas

---

3. Switch com retorno armazenado em variável

Outra forma comum é definir o resultado em uma variável e retornar no final:

function EscolhaVariavel({ tipo }) {
    let resultado;

    switch (tipo) {
        case "admin":
            resultado = "Administrador";
            break;

        case "user":
            resultado = "Usuário";
            break;

        case "guest":
            resultado = "Visitante";
            break;

        default:
            resultado = "Perfil desconhecido";
    }

    return <h1>{resultado}</h1>;
}

export default EscolhaVariavel;

Explicação:

• Utilizamos break para interromper a execução do switch
• Esse formato deixa o código mais flexível para ajustes futuros

---

Dicas importantes

• Use switch quando houver muitas condições baseadas no mesmo valor
• Sempre utilize default para evitar retornos inesperados
• Para poucas condições simples, if/else pode ser mais indicado

Agora você já sabe utilizar a estrutura de escolha no React para controlar o que será exibido na tela!

Abaixo compartilho o vídeo dessa aula no YouTube: