How to build a Stepper with compound components

In this article we take a second look at compound components by building a Stepper for to different views in steps.

A Stepper component.

Last time on building compound components, Steven wrote an article to show how you can build a compound component in 3 easy steps. He used a convoluted multi-step form application to demonstrate the concept. The audience members replied with a bit of confusion. Will the React community ever understand how easy it is to build compound components? Find out next time on building compound components!

Well… let me start by saying the recap is true. I’m sorry I let you down. I told you building compound components in React would be easy. If you read my last article you built the component in three steps. Mission accomplished in that regard, but the accompanying multi-step form example was a bit harder to follow.

In this article you are going to build a Stepper component you can use to create multi-step views. As with the previous article, compound components can be written in three easy steps. The first step is to draw our desired JSX markup as shown on line 15 to 21.

Now that you have your JSX mock up structure, you need to determine the types of props you want in your components. The Step component will be the target component to receive props. The props you want are listed below with their intended functionality.

isActive — determines if the step should be active

displayPrevious — controls display of the previous button

displayNext — controls display of the next button

displaySubmit —controls display of the submit button

goToPreviousStep — a step function to go backward

goToNextStep — a step function to go forward

With these components you can go from one page to the next. You can control when to show the buttons based on the current active step of the StepList. You can see how to setup your Step component below.

Our Step component is ready to receive props. Next, use the parent component StepList to pass the desired props to its Step component children. When you use the React API to pass props you avoid having to annotate JSX directly which allows for cleaner code. In the end you have what looks like enhanced HTML.

And there you have it, a Stepper component built with compound components. Now you can create multi-step flows in your application. You can

The benefits of this advanced React pattern is clean code. When you pass props to child components in this manner you decouple the presentation layer from the logic layer allowing you to reuse these components in many projects without having to spend hours fixing it to a specific projects needs.

Another thing to note is that with any software pattern, they are, well, opinionated. Some people working with React might comment that this code is brittle or inflexible because you cannot add a div here and there. Well I say that’s right, compound components enforce a constraint of allowing certain components to be nested within each other. But you’ve already seen this imposed restriction in other languages.

The last time you used a ul tag, you probably did not throw in a div tag before the li tag just for funsies. The reason why you do not do that is because you understand the HTML rules for writing web markup. In that same regard, when you use the compound component pattern certain restrictions are put in place in order to write clean, and reusable code. If you don’t like the prescription, code in whatever style best fits your needs…

Share this post with a friend to make them dope!

👋🏽Hi! I’m Steven Natera. Follow me on Twitter @StevenNatera. I’m actively involved in the open source community, specifically GatsbyJS. I like writing about code, startups, React and Kubernetes.