Ecoar a Entrada

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

Assim que o texto do `input` passa a viver no estado, exibi-lo em qualquer lugar é apenas uma questão de chaves. Uma saudação que acompanha a caixa enquanto você digita (`Type`):

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 em tempo real.

Adicione o estado name iniciando como uma string vazia e torne o input (id="name") controlado: value + onChange.
O parágrafo (id="echo") exibe Type your name enquanto a caixa estiver vazia, e Hello, ...! com o nome digitado nos outros casos (por exemplo, digitando 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>