Our Wizard component lacks flexibility for the user, it does not allow modifying the way its components are rendered. But we can refactor our code to grant this flexibility by using the design pattern known as compound components and a shared state between them.
To implicitly share this state we use React's Context API together with the
useContext hook that offers a simple and direct way to consume this shared state. With this, the component provides flexibility to the user allowing him to decide how to render each element of the wizard.
I am really learning a lot from this tutorial! But I think there is a bit of confusion because the code you write in the videos doesn't always match the source code on the github files. The pace of the videos is fine but the jump cuts make it hard to follow. Fortunately, the Github repo is very clear and the code is super clean. Thank you for this content!