ryanzec ryanzec - 2 months ago 23
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

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;