How to pass props to this props children

0 votes

I'm trying to find the proper way to define some components which could be used in a generic way:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

There is a logic going on for rendering between parent and children components of course, you can imagine <select> and <option> as an example of this logic.

This is a dummy implementation for the purpose of the question:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

The question is whenever you use {this.props.children} to define a wrapper component, how do you pass down some property to all its children?

Jul 22, 2020 in Angular by kartik
• 37,510 points
1,393 views

1 answer to this question.

0 votes

Hello @kartik,

 Try using this:

<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(props.children[0], { loggedIn: true, testingTwo: true })}
    {React.cloneElement(props.children[1], { loggedIn: true, testProp: false })}
</div>

Hope this is helpful!!

Thank You!!

answered Jul 22, 2020 by Niroj
• 82,720 points

Related Questions In Angular

0 votes
1 answer

How can we redirect to another page from existing page on clicking alert?

hii, It is really simple to redirect from ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,720 points
1,767 views
0 votes
1 answer

How to perform Email Validation in Javascript?

Validation is a method to authenticate the ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,720 points
139 views
0 votes
1 answer

How can we go back to previous page after having some error on request made through current page ?

$route is used for deep-linking URLs to controllers ...READ MORE

answered Feb 11, 2020 in Angular by Niroj
• 82,720 points
137 views
0 votes
1 answer

How to use node_modules within Electron?

Hii @kartik, The current problem is that I ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,720 points
579 views
0 votes
1 answer

How to specify a port to run a create-react-app based project?

Hello @kartik, You could use cross-env to set the port, ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,720 points
2,449 views
0 votes
1 answer

How to unset or remove a collection element after fetching it?

Hello @kartik, You would want to use ->forget() $collection->forget($key); Hope it ...READ MORE

answered Sep 11, 2020 in Laravel by Niroj
• 82,720 points
965 views
0 votes
1 answer

How to get the id when you're validating in the model Validation unique on update using laravel?

Hello @kartik, in Laravel's inbuilt auth system, the ...READ MORE

answered Sep 11, 2020 in Laravel by Niroj
• 82,720 points
1,901 views
0 votes
1 answer

How do you get the path to the Laravel Storage folder?

Hello @kartik, In Laravel 3, call path('storage'). In Laravel 4, ...READ MORE

answered Sep 11, 2020 in Laravel by Niroj
• 82,720 points
1,236 views
0 votes
1 answer

How to pass a string parameter from angular UI to node.js backend?

Hello Kartik, There are three ways to get ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,720 points
4,311 views
0 votes
1 answer

How can we redirect to an existing route using ngRoute?

Routing is just another way of fixing some content ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,720 points
771 views