Modify attributes of children in ReactJS component

Question

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 1

Now that cloneWithProps is deprecated, the current approach would be

var inputReactObject = React.Children.only(this.props.children);
var clonedChild = React.cloneElement(inputReactObject, {
  className: "input-element test"
});

return clonedChild;

Answer 2

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;