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 del input controlado!: dado que el estado es dueño del texto, tu código puede cambiar la casilla, no solo el usuario. Restablécelo desde cualquier lugar:

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

Establece el estado en una cadena vacía y la casilla se vacía sola en el siguiente renderizado, porque value={name} siempre muestra el estado. Con un input no controlado estarías accediendo al DOM a mano; con el estado es solo una llamada al setter.

Desafío

Intermedio

Completa el compositor de mensajes.

Haz que el input (id="message") esté controlado 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>