6

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

ryanzec
  • 25,398
  • 36
  • 107
  • 160
  • 1
    I'm not sure, but maybe what you really try to do is to pass props from a parent to a children. Check out this modification of your plunker: http://plnkr.co/edit/pzI85OPyJjCOpvcZ5SpP – lpiepiora Nov 11 '14 at 13:46
  • The issue with your suggestion is that the input element is part of the component. I would like to be able to have just one component that you could use for text boxes, text areas, checkboxes, radio boxes, etc...) which would require the ability to modify that children props. – ryanzec Nov 11 '14 at 17:07
  • You should not modify props, but you can clone a child element with props (although I would prefer the solution from my post above). Check out this plunkr: http://plnkr.co/edit/tlbDnMl4RoCtI8WNW9qW?p=preview – lpiepiora Nov 11 '14 at 17:19
  • Is there a solution that is closer to what you would perfer without having to create a component for each input type like ValidatedTextBox, ValidatedTextArea, ValidatedCheckBox, etc... (this ValidatedInput is going to basically wrap the child element within a block of consistent DOM and functionality regardless of input type which is why I would rather have 1 component than X components when the only difference would be the input type)? – ryanzec Nov 11 '14 at 17:26
  • Check [this answer](http://stackoverflow.com/questions/21854938/using-mixins-vs-components-for-code-reuse-in-facebook-react/21857309#21857309) I think it provides very nice approach to validation. But in general I think that having multiple components doing validation for themselves (even components per input type) is not a bad thing. They give a semantic to what you build, and I would argue that having few lines of code more is not a bad thing given that. You can reuse particular validators via Mixins then to reduce code duplication. – lpiepiora Nov 11 '14 at 17:35
  • I forgot about mixin which could be used to de-dup the logical code for validation, i'll have to think about that a bit – ryanzec Nov 11 '14 at 18:29

2 Answers2

8

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;
Josh Kelley
  • 50,042
  • 19
  • 127
  • 215
6

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;
ryanzec
  • 25,398
  • 36
  • 107
  • 160