Snick Snick - 1 year ago 85
React JSX Question

Adding a props to a node object

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download