React with Typescript by example, Passing Props to Children.

Photo by Lautaro Andreani on Unsplash

Hi, React is a cool library with many tools that will help you build your components in the best way possible. I wanted to start a series about some of those tools with a simple and clear working React example with Typescript.

In this first article, we will create a Wizard by utilizing a very powerful React concept of component composition, the children prop.
We will also pass some props to the children from their wrapping parent component.
Sharing props from a parent component to its children can be done using the Context API or the React API for Transforming Elements with the React.cloneElement() function.
In this tutorial, we will use the clone method.

Let's get started!

We will create a simple wizard component that will accept its wizard steps as child components, making it dynamic and open to changes.
But before we’ll start, let’s understand how the children prop is working with an example.

The children prop is a unique prop that helps us with containment of components. It allows a component to pass its nested JSX as a children prop.
Lest show how this works with an example.

I created a new react app using CRA (Create React app) along with Typescript template using this command:

yarn create react-app my-app --template typescript

And created the following components:

This is the rendered result of the above code (with some CSS that I removed from the code above):

As you can see, children h1, button, and p of the Parent component are passed and used inside the Parent component with the help of childrenprop. We could pass any number and type of components in that way.

Now let’s build our Wizard component.

Our Wizard component is composed of:

• A title prop in our interface, used at line 15.
• A local state ‘currentStep’ that represents the current step in use, at line 7.
• Some controls so we can navigate between steps, and a bottom line shows the current step we are in.

Now let’s focus on our childrenprop here.
I used React.Children.toArray function to get a child by index, then used React.cloneElement to clone the specific step we’re in, and add some new props to it, in our case, the current index.
Once the wanted step is cloned along with the injected props, we render it at line 18.

Now at this point, it’s important to mention, This might not be the best-proposed solution for this Wizard component, maybe using the react Context API would make more sense here. It is just one way to achieve this goal of sharing props from parent to children.

Next, we want a ‘WizardStep’ component to use inside the wizard:

Note that the index prop is optional since we don’t have this prop when we are using the WizardStep Component.
The header prop was added so we can distinguish between our steps
Now let’s bring it all together:

The result:

One more improvement that we can add is a childrenvalidation.
In our example, we can validate that every WizardStep contains a header prop by adding the following lines to our Wizard component:

// Validate
React.Children.forEach(children, (c) => {
    if (!React.isValidElement<WizardStepProps>(c) ||      c.props['header'] === undefined) {
        throw new Error("child must have a header prop")
    }
})

This will throw an error if one of the children will not pass this validation, for example:

function App() {
    return (
        <div className="App">
            <Wizard title={'Welcome to my wizard'}>
                <WizardStep header={'Welcome to A'}/>
                <WizardStep header={'Welcome to B'}/>
                <WizardStep header={'Welcome to C'}/>
                <div>Will not render</div>
            </Wizard>
        </div>
    );
}

There are some other functions that can help us with that kind of validation:

• React.Children.forEach/map- Iterate over children
• React.Children.count- Returns the total number of components in children
• React.Children.only- Verifies that children has only one child (a React element)

That is all for this part, hope you enjoyed reading.