Manejando el estado de controles de formulario creados dinámicamente — Parte 1
Bienvenid@s a la primera aventura, debo de anticiparles que esta será un poco larga por las diversas etapas y conceptos que conlleva, aun así espero sea de utilidad y aprendizaje comunitario 😉.
TL;DR. En esta historia vamos a establecer el contexto del problema que estaremos analizando en las siguientes partes.
Descifremos el título de esta aventura
Manejo de estado
Cuando un usuario interactúa con una aplicación web, esta guarda datos necesarios para llevar a cabo dicha interacción. Dichos datos se conocen con el término de estado y manejarlo hace referencia al cómo armar la estructura de éstos datos de tal manera que sea de fácil acceso y manipulación (inserción, actualización o eliminación de la misma).
Ejemplos:
- Cuando entras a Netflix y esta muestra la lista de películas recomendadas basada en tus gustos culposos, los datos de dicha lista se almacenan en un estado como resultado de una petición a un servicio web probablemente.
- Por otro lado, tenemos estado de UI propiamente, por ejemplo, otra vez en Netflix, cuando das click en una película y se abre una previsualización de la película que seleccionaste, la aplicación y el componente que representa la UI guarda el estado que indica que un modal u otro componente visual está abierto con ciertos datos (película) de contenido.
Controles de formulario
Un formulario está compuesto de controles que permiten ingreso de datos por parte del usuario y que puede terminar en el envío de datos recopilados a algún recurso externo como una base de datos en un servidor en cualquier parte del mundo.
Alerta de spoiler: Angular tiene un módulo designado al control de formularios (@angular/forms).
Creados dinámicamente
En un formulario de contacto, es común que sepas los datos que vas a solicitar al usuario y estos pueden estar definidos en tu código antes de que este sea interpretado o compilado. Sin embargo, existen casos como el que discutiremos en adelante, en el cual, se conoce lo que se quiere pedir, pero los posibles valores de dicho dato puede variar en base a diversos criterios. Por ejemplo, cuando tienes que armar tu lista de compras, tu puedes anticipar que vas a necesitar el nombre y cantidad de un artículo, pero no sabes cuántos ni menos cuáles ya que estos dependerán de tu usuario, a esto nos referimos con que son creados dinámicamente o en tiempo de ejecución.
Problema a resolver
Por motivos de acuerdos de privacidad no puedo describir el caso exacto al que me enfrenté pero trataré de usar otro ejemplo que resalte los retos técnicos a los que me enfrenté.
Imaginemos que estamos desarrollando el feature de selección de productos a solicitar en una app de delivery, para efectos prácticos, la empresa para la que estamos programando esta funcionalidad se llama Quickly.
Por motivos de la vida e inspiración de UI y UX, el diseño propuesto (impuesto) se verá así:
El feature consiste en listar los productos disponibles a solicitar y cuando algún producto sea elegido, la UI se deberá actualizar mostrando un input de tipo número que permita al usuario ingresar la cantidad de unidades que desea de dicho producto. Ten en cuenta que los productos no seleccionados no deben mostrar este input.
¿Cómo lo resolverías? Si has visto o desarrollas principalmente con React, ¿cómo lo harías? Si en caso eres un@ Angularian, ¿ya tienes claro el problema?
Te dejo con el problema planteado, en la siguiente parte de esta historia, revisaremos algunas ideas cómo resolverlo con React y Angular (tiene algunas particularidades que lo hacen un poco más complejo de lo que parece 🤓).
