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,530 points
1,940 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,820 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,820 points
2,041 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,820 points
171 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,820 points
199 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,820 points
695 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,820 points
3,158 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,820 points
2,126 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,820 points
2,706 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,820 points
2,082 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,820 points
5,318 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,820 points
1,099 views