ryanzec ryanzec - 1 year ago 126
React JSX Question

Modify attributes of children in ReactJS component

I am trying to figure out how to modify the children of a component to for example, add a class. I have tried to do:

var inputReactObject = React.Children.only(this.props.children);

inputReactObject.className = "test";

However that does not seem to work.

Is it possible to modify children attributes in a ReactJS component?

Full plunker: http://plnkr.co/edit/msbUSDBQn17qXzBHzGXD?p=preview

Answer Source

As mentioned by @lpiepiora plunker, the code to do what I want would be:

var inputReactObject = React.Children.only(this.props.children);
var clonnedChild = React.addons.cloneWithProps(inputReactObject, {
  className: "input-element test"

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