Reflejar la entrada

Parte de la sección Fundamentos del Journey de React de Coddy — lección 29 de 42.

Una vez que el texto del `input` reside en el estado, mostrarlo en cualquier lugar es solo cuestión de llaves. Un saludo que sigue a la casilla a medida que escribes:

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

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

El operador ternario maneja el cuadro vacío con un mensaje amigable en lugar de un incómodo Hello, !. Este patrón de entrada más salida en vivo se encuentra en cuadros de búsqueda, formularios de registro y editores en todas partes.

Desafío

Fácil

Crea un saludo en tiempo real.

Añade el estado name comenzando como una cadena vacía y haz que el input (id="name") sea controlado: value + onChange.
El párrafo (id="echo") muestra Type your name mientras el cuadro esté vacío, y Hello, ...! con el nombre escrito en caso contrario (por ejemplo, al escribir Ada → Hello, Ada!).

Pruébalo tú mismo

<!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>