Crear un Componente Wizard Usando useState React Hooks

Share this video with your friends

Send Tweet

Crearemos un sencillo componente que actúa como wizard o multi step, un componente que permite navegar entre un listado de componentes hijos mostrando solo uno a la vez. La navegación se realiza por medio de botones que permiten ir hacia adelante o atrás.

Esta implementación requiere el manejo de un estado sencillo que indica cual es el elemento que está siendo renderizado en el momento: un indice.

En este ejemplo podemos ver el uso de useState, y como utilizar la forma funcional de la función actualizadora para acceder al estado actual y modificarlo.