Botón de borrar

Parte de la sección Fundamentos del Journey de React de Coddy. Lección 31 de 42.

Aquí está el superpoder de la entrada controlada: como el estado es el propietario del texto, tu código puede cambiar el cuadro, no solo el usuario. Restablécelo desde cualquier lugar:

<button onClick={() => setName('')}>Clear</button>

Establece el estado como una cadena vacía y el cuadro se vacía en el siguiente renderizado, porque value={name} siempre muestra el estado. Con una entrada no controlada tendrías que acceder al DOM manualmente; con el estado, basta con una llamada al setter.

Desafío

Intermedio

Termina el compositor de mensajes.

Haz que la entrada (id="message") sea controlada con el estado message.
Muestra el borrador en el párrafo (id="draft"): el texto Draft: seguido del mensaje.
El botón id="clear" vacía el mensaje.

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>