How to Pass Props to Children in React

1. Passing Props to Children in React
2. Passing Props to Children in React Using the Context API
3. Passing Props to Children in React Using React.cloneElement()

React developers rely on component reusability to build powerful yet maintainable applications.

The react library features a composition model, which adds to the flexibility of utilizing reusable components. In some situations, you can’t predict what the children of your components will be.

For instance, when building a messaging app, your dialog box might include emojis as well as a piece of text.

React provides a props.children feature to increase the reusability of the components. To put it in simple words, React developers can use this.props.children to display the values (usually UI elements) placed between the opening and closing tags of a parent component.

Passing Props to Children in React

Let’s imagine you have children elements that you receive through props.children. To display them, you need to include props.children or this.props.children (for class components) in your return statement.

Here’s an example with three components: the parent component App at the top and a Box component with a child Text component. Let’s take a look:

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

But what if you need to pass down additional props to the elements or components included in props.children? In our example, we might need to specify a color or fontSize property for our text.

Let’s explore two great options to do this.

Passing Props to Children in React Using the Context API

Context allows you to pass props down to an entire tree of components. It is extremely useful because you have an App component at the top but want to pass down an event handler to a child component at the bottom of the tree.

You can pass it down manually, but it’ll be time-consuming and hard to track. Instead, you can use Context to make the value available in every child component.

Technically, Context is not the same as props, but it gets the job done in our situation. To do this, we’re going to use the React.createContext() method, available in all React applications.

First, we define a variable to store a Context instance:

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

Note that the variable is created outside the scope of class components.

We find the component that displays this.props.children and wrap it with a <SampleContext.Provider>. All that is between the opening and closing tags of the wrapper will have access to the values we define.

Then we specify the value:

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

Now, we go to the component that is being passed down like this.props.children and set the contextType property equal to the variable we initially created:

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

Once we do that, we can access the values from Context. In this case, we define an inline style object and set the color property to this.context.color, red.

The text is indeed red, as seen in the playcode. You can try editing the code yourself by adding or removing properties in the Context and seeing if it works.

Passing Props to Children in React Using React.cloneElement()

Alternatively, you can also use the cloneElement() method to add custom props to the elements or components in your props.children. Let’s look at and digest an example:

<>{React.cloneElement(props.children, {color: "red"})}</>

In our example, the method takes two arguments. First, we must pass it props.children, which it will use as a starting point for cloning. This means that the cloned element will have all the props of the original.

The cloneElement() method also preserves refs, which are important when interacting with DOM.

As a second argument, we must pass all the additional props we want the component to receive. In this case, we’ll pass a color prop with the value of "red".