close

How to pass props to {this.props.children}

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to pass props to {this.props.children} in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to pass props to {this.props.children} ?

  1. How to pass props to {this.props.children} ?

    pass props to {this.props.children} Try this
    <div>{React.cloneElement(this.props.children, {...this.props})}</div>
    It worked for me using react-15.1.

  2. pass props to {this.props.children}

    pass props to {this.props.children} Try this
    <div>{React.cloneElement(this.props.children, {...this.props})}</div>
    It worked for me using react-15.1.

Method 1

For a slightly cleaner way to do it, try:

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

Edit: To use with multiple individual children (the child must itself be a component) you can do. Tested in 16.8.6

<div>
    {React.cloneElement(this.props.children[0], { loggedIn: true, testPropB: true })}
    {React.cloneElement(this.props.children[1], { loggedIn: true, testPropA: false })}
</div>

Method 2

Try this

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

It worked for me using react-15.1.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment