Blog / Quick-fixes

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 MaygerWill Mayger
July 30, 2021
Article

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!

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app

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

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Become an expert in ReactJS, TypeScript, and JavaScript.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.

Good things are coming, don't miss out!

Good things are coming, don't miss out!

Follow me on Twitter to stay up to date and learn frontend, React, JavaScript, and TypeScript tips and tricks!

Are you a novice, intermediate or expert react engineer?

Find out here by taking my fun, interactive, quick quiz which takes approximately 1 - 3 minutes. How well will you will do?

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app