Let’s dive into the world of clean React code with compound components. After implementing my first compound component in React, I’m officially addicted to this pattern. As the self-proclaimed expert on the matter (actually I learned from and his ), I’m going to teach you how to learn the best advanced React pattern out there in a few simple steps. Why? Because you deserve a better codebase! Ryan Florence talk on compound components At this point you might be thinking, who is this guy? He’s not , who wrote . He’s not our beloved React prophet . Well, my response to you is you’re correct! Kent C. Dodds the course on compound components Dan Abramov You want to make the JSX markup easy to read by grouping related components. The approach is extensible as adding another step or button is as simple as adding another component to the relevant component group. The logic that powers the fundamental components at the bottom will come from the component above. StepList and ButtonList make up the first level of the related components. A renders a given component if its the active step. goes back a step if possible. moves forward a step if possible. displays the submit message but only if its the last step. and pass down props to that determine which buttons to render on a given step and what step is active. Step Previous Next Submit StepList ButtonList Step 2. Determine what props your components will need From here you think about what props each container component needs. needs to determine the current step to present to the user. Use a current step prop. shows the , , and buttons on certain steps. An active step and total steps help determine when to show each button. You need a submit function because this is a form. Now that you have the props, you’re done! Well, not exactly. StepList ButtonList Previous Next Submit Don’t do this! We want to pass props indirectly. With you props in mind, you might be tempted to write your props directly on your components like you see above but there is a cleaner way to pass props. The better way is to pass your props indirectly. How you ask? The React API has a couple useful methods you can use to create new components from existing ones. That’s where and will become useful. React.Children React.cloneElement Step 3. Wire your components with the React API The best part of React is that a component is a regular objects. As with any object, you can manipulate them to pass around different props and functionality without having to annotate JSX components directly. will allow you to iterate over the children of a component. will allow you to create new component with additional props from an existing component element. React.Children React.cloneElement Here you iterate the children in using . As you iterate, use to create a new component with the desired props you want to pass down the component tree. FormWizard React.Children React.cloneElement The advancement functions, and , are used by and buttons. The is used by . We add these props to the new component to pass downward. The prop helps both the components and form buttons determine if they should render. onNextStep onPreviousStep Next Previous handleSubmit Submit ButtonList activeStepIndex Step The new component will get an prop from to know when to render a step. The functions and state props in the component go to the corresponding buttons that need them. Our form hides the previous button on the first step, hides the next button on the last step, and shows the submit button on the last step. Outside these cases the buttons are visible. Step isActive StepList ButtonList Finally, use the props passed to the base components to determine what should be rendered. See, simple! Sorta. I admit there is a lot to wrap your head around. But here’s the best part, Oprah and I are both Aquarius (what’s the plural of Aquarius? Aquarii?) therefore: you get a demo, you get a demo, everybody gets a demo! Here is a of the guide. demo With React 16.3 you could use the to make the FormWizard even more flexible in regards to props. Since your application is only a few levels deep you should follow the advice given in the docs. Use Context when you are passing down the same data to many components, at multiple levels. Context API If you enjoyed this dope techno guide then where we share the dope shit we’re building. Now go forth and spread the word of compound components. Share this post with a friend to make them dope! join the Dope Technophiles newsletter Cheers!May 12th, 2018 👋🏽Hi! I’m Steven Natera. Follow me on Twitter . I’m actively involved in the , specifically . I like writing about code, startups, React and Kubernetes. @StevenNatera open source community GatsbyJS
