This week I came across an obstacle in React

Mark Gituma
Jun 13, 2018 · 2 min read

The problem

This week I came across an obstacle in React, where I needed to pass data down the component hierarchy from parent to child. The conventional way to perform this would be as follows:

The above assumes some explicitly defined ChildComponent, where the data, state and functions are passed down as attributes to the component.

However, passing data to the child is sometimes not straightforward in the real world. Consider this example where the children components are defined and rendered using this.props.children:

How can the data and state be passed down to each child component?

React.cloneElement to the rescue

To solve the above problem the React.cloneElement Top-Level API is convenient. From the React documentation, the function is defined as:

React.cloneElement(
element,
[props],
[...children]
)

The function takes a react component as the first argument, which in our case will be the child component. The second argument is an object containing any additional props we want to bind to the child e.g someData, someState and someFunction, and finally returns a new element. This is almost equivalent to:

<element.type {...element.props} {...props}>
{children}
</element.type>

Thus the implementation of the cloneElement function in our scenario becomes:

We are creating an array, using React.Children.map with this.props.children as the first argument. The second argument is a function providing access to each individual child, which is cloned using React.cloneElement. During cloning, addition props containing someData, someState and someFunction are passed as an object to each each child.

Use case and sample code

You may be wondering why this scenario might occur. Consider trying to build a reusable “accordion” as follows:

Each child in the “accordion” needs to have access to the isActive parent state to know which child is currently active. In addition, the click of an element in the child component should trigger a change in the isActive state in parent. The function that conducts this state transition also needs to be passed to the child, i.e. someFunction.

Conclusion

React is a powerful library that makes development fun and fast. It comes with a lot of APIs, which can be a lot to take in, but hopefully you now know one more way to improve your development.

If you like this post, don’t forget to like and recommend it.

Credits

Daniel Yuschick — React — Passing State to {props.children} in JSX

Better Programming

Advice for programmers.

Mark Gituma

Written by

Founder of Dancelogue.com, a company using AI to understand and classify human movement in dance. https://www.linkedin.com/in/markgituma/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade