How to pass props to children in React

How to pass props to children in React

In this post find the quick and simple solution for how to pass props to children in React - Quick Fix Series!

Will Mayger

A post by Will Mayger
July 30, 2021

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!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Some graphics used on this post were made using icons from flaticon.