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,520 points
3,476 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!!

If you need to know more about React, Its recommended to join React Course today.

Thank You!!

answered Jul 22, 2020 by Niroj
• 82,880 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,880 points
4,224 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,880 points
933 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,880 points
1,212 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,880 points
1,900 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,880 points
5,805 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,880 points
9,592 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,880 points
6,684 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,880 points
9,655 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,880 points
10,767 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,880 points
3,675 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP