Ecoar a Entrada

Parte da seção Fundamentos do Journey de React da Coddy. Lição 29 de 42.

Assim que o texto de entrada estiver no estado, exibi-lo em qualquer lugar é apenas uma questão de chaves. Uma saudação que acompanha a caixa conforme você digita:

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

O ternário trata a caixa vazia com uma mensagem amigável em vez de um estranho Hello, !. Esse padrão de entrada com saída em tempo real é usado em caixas de pesquisa, formulários de cadastro e editores por toda parte.

Desafio

Fácil

Crie uma saudação ao vivo.

Adicione o estado name começando como uma string vazia e torne o campo de entrada (id="name") controlado: value + onChange.
O parágrafo (id="echo") exibe Type your name enquanto o campo está vazio e Hello, ...! com o nome digitado caso contrário (por exemplo, ao digitar Ada → Hello, Ada!).

Experimente você mesmo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>