Crear un Componente Wizard Usando useState React Hooks

Matías Hernández: [0:00] Veremos una versión sencilla de un componente wizard, un componente que permite renderizar múltiples pasos.

[0:05] Primero crearemos el componente base creando un contenedor que mantendrá otros dos contenedores, uno para el contenido que se renderizará y otro para los botones necesarios para la navegación.

[0:20] Con esto en su lugar ya podemos definir los componentes que irán dentro de nuestro wizard y definir el aspecto que tendrán cuando sean renderizados para eso crearemos en este caso tres componentes simples que llamaremos page que simplemente contienen un título indicando la página a la que corresponden.

[0:42] Agregamos esto dentro de nuestra aplicación. Primero escribimos el contenedor wizard, que es el componente que hemos creado, y dentro de él escribimos los children que serían las distintas páginas. Podemos ver en pantalla un cuadro que tiene los botones abajo y las tres páginas renderizadas.

[1:03] Nuestro objetivo ahora es mostrar uno a la vez, por lo que necesitamos manipular los componentes que el wizard recibe. Para esto, utilizaremos la API React.Children que permite manipular el objeto children, en este caso, convirtiéndolo a un arreglo de elementos.

[1:19] Luego, creamos la variable currentPage que indicará qué página se renderiza y le pasamos el índice indicando que será la primera página solamente. Podemos ver que sólo se ha renderizado la página 1. Ahora es cuando entra en juego el hook useState.

[1:34] Es necesario que el componente seleccionado en currentPage sea variable, se modifique con el tiempo, y cambie cuando se hace click en alguno de los botones. Esto es que cambie el estado de nuestro componente.

[1:47] Este estado lo podemos manejar con el hook useState que retorna el arreglo con dos elementos, un valor que llamamos activePage y una función que sirve para definir el valor del estado que llamaremos setActivePage.

[1:58] Además, useState puede recibir un valor inicial que será en este caso el primer índice . Con esto, ya podemos usar el valor de activePage para definir qué se renderiza en cada momento. Recuerda que cada llamada al componente tiene su propio valor de activePage.

[2:13] Ahora podemos usar el valor de activePage para definir si se muestra o no cada botón. Para eso simplemente escribimos una condicional ternaría indicando que se renderice el botón con cierta condición o se renderice null.

[2:26] En el caso del botón Atras, se renderizará sólo si activePage, que es el índice, sea mayor que , y en el caso del botón Siguiente, se renderizará sólo si activePage es menor que el total de ítems dentro de las páginas. Aún el botón no hace específicamente nada. Es necesario que el estado queda cambiar.

[2:46] Para eso, definiremos dos funciones, una para cuando el botón Atras es presionado y otra para el botón Siguiente. Para el botón Atras, simplemente disminuimos el valor del índice. Para eso, utilizamos la forma funcional de nuestro setter, la función setActivePage.

[2:59] Este método puede recibir una función que recibe como parámetro el estado actual y modifica el estado en base al valor retornado. En este caso, disminuye el índice en -1. De forma similar al presionar el botón Siguiente, el índice se incrementará en 1.

[3:13] Agregamos estos manejadores de eventos a cada botón y con esto ya tenemos una versión simplificada de un componente que permite navegar entre los elementos renderizados utilizando useState para manejar el estado.

[3:23] UseState permite manejar el estado de un componente definido como una función. UseState retorna un arreglo con dos elementos, el valor del estado y una función para modificar ese estado. Es posible pasar una función como argumento a la función modificadora, lo que permite acceder al estado actual y retornar el nuevo estado.