Adding a props to a node object

Question

My current component is receiving a node as props from its parent.

Let's assume

myComponent.propTypes = {
  icon: PropTypes.node.isRequired,
}

where icon will receive something like

<Icon src="...." description="..." />

Now inside my component I just need to add

{this.props.icon} to get that rendered.

What I need is to add a prop color="#f00" to that node, in a way that it results in

<Icon src="...." description="..." color="#f00"/>

And I need to do inside myComponent. Not sure what's the right syntax to do so.

Possible duplicate of [How to pass props to {this.props.children}](http://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — Pranesh Ravi, Oct 02 '16 at 16:30
@PraneshRavi I sort of agree, this is a duplicate, just more generic use case, so maybe better to keep it. — Snick, Oct 02 '16 at 16:39

Season · Accepted Answer · 2016-10-02T16:32:54.117

1

Render this instead:

React.cloneElement( this.props.icon, { color: "#f00" } );

Another option is to pass on the Icon component rather than an Icon instance so that you can React.createElement which takes a props parameter.

edited Oct 02 '16 at 16:32

answered Oct 02 '16 at 16:27

Season

4,056
2
16
23

Adding a props to a node object

1 Answers1