A renderização condicional no React permite renderizar diferentes componentes ou elementos com base em certas condições, como estado ou adereços. Aqui estão alguns métodos comuns para obter renderização condicional:

1. Usando instruções If-Else

Você pode usar instruções if-else JavaScript padrão dentro do seu componente.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. Usando operadores ternários

Esta é uma maneira concisa de renderizar conteúdo com base em uma condição.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

3. Usando o operador && lógico

Você pode usar o operador lógico AND para renderizar um componente somente se uma condição for verdadeira.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. Declaração de troca

Para condições mais complexas, você pode usar uma instrução switch.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

Exemplo

Aqui está um exemplo completo usando componentes funcionais:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

Resumo

Escolha o método que melhor atende às suas necessidades com base na complexidade das suas condições e no seu estilo de codificação pessoal. Deixe-me saber se precisar de mais exemplos ou explicações!