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 de entrada vive en el estado, mostrarlo en cualquier lugar es solo cuestión de llaves. Un saludo que sigue al cuadro mientras 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 vivo.

Añade el estado name, comenzando como una cadena vacía, y haz que el campo de entrada (id="name") sea controlado: value + onChange.
El párrafo (id="echo") muestra Type your name mientras el campo está vacío, y Hello, ...! con el nombre escrito en cualquier otro caso (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>