Build a Wizard Component using useState React Hooks

Matías Hernández: [0:00] Let's create a simple version of a Wizard component, a component that allows us multiple step rendering. We will first create the base component by creating a container that will hold two other containers, one for the content to be rendered and one for the buttons necessary for navigation.

[0:16] With this in place, we can now define the components that will go into our Wizard and define the appearance they will have when they are rendered. For that, we will create in this case three simple components that we will call page1 that simply contains a title indicating the page to which does correspond.

[0:36] We add this within our application. First, we write the Wizard container, which is the component we have created, and inside it, we write the children that will be the different pages. We can see on the screen a box that has the buttons below and the three rendered pages. Our goal now is to display one page at a time, so we need to manipulate the components that the Wizard receives.

[1:02] For this, we will use React.Children API that allow us to manipulate the children object, in this case, converting it to an array of elements. Next, we create a currentPage variable that will indicate which page is rendered and we pass it the index indicating that it will be the first page only. We can see that only page1 has been rendered.

[1:24] Now is when the useState hook comes into play. It's necessary for the components selected in the currentPage to be variable, to change over time and to change when any of the buttons are clicked.

[1:36] This is to change the state of our component. We can handle this state with the useState hook that returns the array with two elements, a value that we call activePage and a function that serves defined value of the state that we call setActivePage. Also, useState can receive an initial value, which in this case will be the first index.

[1:57] With this, we can now use the value of activePage to define what is rendered at any time. Remember that each call to the component has its own activePage value.

[2:09] We can use the value of activePage to define whether or not its button is shown. For that, we simply write a ternary conditional indicating that the button is rendered with a certain condition or that is rendered null. In the case of the Back button, it will be rendered only if the activePage, which is the index, is greater than .

[2:30] In the case of the Next button, it will be rendered only if the activePage is less than the total number of items within the page. Yet, the button does not specifically do anything. It is necessary that the state remains to change.

[2:44] For that, we will define two functions, one for when the Back button is present and other for the Next button. For the Back button, we simply decrease the index value. For that, we use the functional form of our setter, the setActivePage function.

[2:57] This method can receive a function that receives the current state as a parameter and modifies the state based on the return of value. In this case, decrease the index by 1. Similarly, when pressing the Next button, the index will increment by 1.

[3:11] We add these to the EventHandlers to each button, and with this, we already have a simple version of a component that allow us to navigate between the rendered element using useState to handle the state.

[3:22] UseState lets you handle the state of a functional component. useState returns an array with two elements, the value of a state and a function to modify the state. It is possible to pass a function as an argument to the modifier function, which allows accessing the current state and return the new state.