How to pass props to children in React

In this quick post we will be covering how to pass props to children in React so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - passing props to one or many children in React

It is pretty common to use children in React to be able to allow components to be nested within other components (parent and child elements).

But what if you want the parent element to pass props to all of its child elements (props.children)?

This is where we find the problem. The children prop is just something we put into our JSX by wrapping it within curly braces.

Here is an example of this problem:

export function ExampleParentComponent({ children, name }) {
  return <div>{children}</div>
}

In the above example we would want to pass the name prop that is passed into the parent, to all children of it as well.

The solution - How to pass props to children in React

To solve this problem of how to pass props to children in React we are going to look at using the function React.cloneElement.

This function will let us clone an element and add in new props to it which is ideal for what we need.

The cloneElement function accepts a valid React element, so we also need to make sure that is what we are providing it to avoid any errors, thankfully there is a function that can do just that as well which is React.isValidElement.

React.isValidElement will return a boolean true or false depending on if what we pass it is a valid React element or not.

The last part of how to pass props to children is that there could be multiple children, which means we need to check to see if there is one child element or many.

We can do this by using Array.isArray which will return a boolean value of if what we pass in is an array or not.

All we need to do is to combine all of this together into a small helper function and then we are good to go.

Here is the function to add props to any amount of children:

function addPropsToReactElement(element, props) {
  if (React.isValidElement(element)) {
    return React.cloneElement(element, props)
  }
  return element
}

function addPropsToChildren(children, props) {
  if (!Array.isArray(children)) {
    return addPropsToReactElement(children, props)
  }
  return children.map(childElement =>
    addPropsToReactElement(childElement, props)
  )
}

And here is how this would look in use:

export function ExampleParentComponent({ children, name }) {
  return <div>{addPropsToChildren(children, { name })}</div>
}

Summary

There we have the quick fix to how to pass props to children in React, if you want more like this be sure to check out some of my other posts!