Crear un formulario funcional en React implica más que maquetar inputs y botones: requiere controlar eventos, prevenir el comportamiento por defecto del navegador y conectar la lógica con los estados de tu aplicación. En esta guía construirás el componente TodoForm paso a paso, ideal si estás aprendiendo React y quieres entender cómo manejar formularios sin recargar la página.

Cómo estructurar el componente TodoForm en React

El primer paso es crear una carpeta nueva con su propio index.js, siguiendo la misma convención que el resto de los componentes de la aplicación [02:15]. Importas React desde el inicio porque más adelante vas a usar useState, y exportas el componente para consumirlo donde lo necesites.

La estructura visual del TodoForm envuelve todo dentro de una etiqueta <form>, porque no tendría sentido construir un formulario sin usar el elemento nativo de HTML. Dentro colocas:

• Un <label> con el texto Escribe tu nuevo TODO.
• Un <textarea> con un placeholder como Cortar cebolla para el almuerzo.
• Un <div> contenedor con dos botones: cancelar y añadir.

¿Por qué un textarea y no un input? Porque cuando el usuario escribe mucho texto, el textarea permite que el contenido fluya hacia abajo en lugar de generar scroll horizontal [03:40]. Es una decisión de UX pequeña que mejora la experiencia.

Cómo nombrar las clases CSS con nomenclatura BEM

Para mantener consistencia, el contenedor recibe la clase TodoForm y los botones se identifican como TodoFormButton. Como existen dos botones con estilos distintos, agregas una variante: el botón de cancelar lleva TodoFormButton--cancel y el de añadir queda con la clase base. Esta lógica de modificadores en BEM te permite diferenciar visualmente elementos que comparten una raíz común.

Por qué se recarga la página al enviar un formulario

Al probar el componente en el navegador, notarás algo curioso: al hacer clic en cualquier botón, la página se recarga. Esto pasa porque los formularios HTML tienen un comportamiento por defecto que intenta enviar toda la información de los campos a una URL [10:45].

¿Qué hace un formulario HTML por defecto al enviarse? Recopila los valores de inputs, textareas y checkboxes, y los envía a una URL desde el navegador. Era el método estándar antes de que JavaScript tomara el control del envío.

Además, hay un detalle que pocos conocen: cuando colocas varios botones dentro de un <form>, HTML asume automáticamente que el último botón es de tipo submit a menos que le indiques lo contrario con el atributo type. Por eso el botón de añadir dispara el evento submit aunque no lo hayas configurado explícitamente.

Cómo usar onSubmit y preventDefault en React

La solución elegante no es agregar listeners a cada botón, sino escuchar el evento submit directamente en el formulario. En React, ese evento se llama onSubmit con camelCase, a diferencia de HTML que lo escribe en minúsculas.

Dentro del handler recibes el objeto event, que trae propiedades como event.target.value y métodos útiles. El método clave aquí es preventDefault, que cancela el comportamiento por defecto del navegador y evita la recarga [13:20].

jsx const onSubmit = (event) => { event.preventDefault(); // aquí va tu lógica };

<form onSubmit={onSubmit}> {/* campos y botones */} </form>

¿Qué hace event.preventDefault en React? Bloquea la acción por defecto del navegador asociada a un evento. En formularios, evita que la página se recargue al hacer submit, permitiéndote manejar los datos con JavaScript.

Al probar de nuevo, el botón de añadir ya no recarga la página. El botón de cancelar tampoco, porque al no ser de tipo submit, no dispara el evento del formulario. Pero aún no hace nada útil: necesitas que cierre el modal.

Cómo conectar los botones con la lógica de la app

El botón de cancelar debe cerrar el modal, y el botón de añadir debe guardar el nuevo TODO y luego cerrar el modal. Aquí entra el siguiente paso: consumir el contexto de la aplicación para acceder a las funciones que controlan el estado global, como agregar tareas y cambiar la visibilidad del modal [16:10].

Qué propiedades del textarea necesitas controlar

Para capturar lo que el usuario escribe, vas a necesitar un estado local con useState que guarde el valor del textarea. Cada vez que el usuario escribe, actualizas ese estado mediante el evento onChange, leyendo event.target.value.

Los estilos del textarea se parecen mucho a los del input del TodoSearch, con una diferencia clave: el height es mayor para acomodar varias líneas de texto. El contenedor del formulario usa display: flex con flex-direction: column para apilar verticalmente label, textarea y botones, mientras que el div interno de los botones mantiene la dirección horizontal por defecto.

Un detalle de diseño responsivo: el formulario tiene un max-width de 300 píxeles para que no crezca indefinidamente en pantallas grandes. Mantener márgenes laterales dentro del modal evita que el contenido se pegue a los bordes.

¿Ya lograste que tu TodoForm abra el modal, escriba tareas y cierre con ambos botones? Cuéntame en los comentarios cómo te fue resolviendo el reto y qué decisiones tomaste con los estilos.