Renderização por cindição - Mllara/react-project GitHub Wiki

-Podemos atrelar a exibição de algum elemento a um if;

-Esta ação é chamada de renderização condicional;

-Envolvemos as tags em chaves {};

-Como as chaves executam JavaScript, criamos nossa condição;

-É possível usar o state para criar as condições;

Na pasta Condicionais.js:

import { useState } from "react"

function Condicional (){

const [email, setEmail] = useState() 

const [userEmail, setUserEmail] = useState()

function enviarEmail(e){

    e.preventDefault()

    setUserEmail(email)

    console.log(userEmail)

}

function limparEmail(e){

    setUserEmail('')
    
}

return (

    <div>

        <h2>Cadastre o seu e-mail:</h2>

            <form>

                <input 

                type="email" 

                placeholder="Digite o seu e-mail" 

                onChange={(e) => setEmail(e.target.value)} />

                <button onClick={enviarEmail}>

                    Enviar-email

                    </button>

                    {userEmail && (   //nossa condição especial: if com uma sintaxe mais sucinta. Quando

for verdadeira ela exibe, e quando não for, nao exibe mais

                        <div>

                            <p>O e-mail do usuário é {userEmail}</p>

                            <button onClick={limparEmail}>Limpar e-mail</button>

                        </div>

                    )}

            </form>

    </div>

)

}

export default Condicional

⚠️ **GitHub.com Fallback** ⚠️