React: Access child element with findDOMNode throws error - reactjs

Question

I have a Container component, it gets a few children.
on componentDidUpdate i would like to change a style attribute.
seems like the Container should be able to handle this, instead of each child handling itself.
Problem, react throws an error when trying to get Dom node of child.
var childA = this.props.children[0];
React.findDOMNode(childA);
=> Uncaught Error: Invariant Violation: Element appears to be neither ReactComponent nor DOMNode (keys: )
EDIT: That ^^^ was the wrong way to write react!
If your children need to do something, you should always try to pass it down from the top.
lets say you have 3 colors: green,red,blue and you want your children to be colored that way, but maybe they change order often. pass it down
Parent = React.createClass({
renderChildren: function(){
var colors = ["red", "blue", "green"]
return React.Children.map(this.props,children, function(child, index){
// this returns a legit clone, adding one extra prop.
return React.cloneElement(child, {color: colors[index]});
})
},
render: function(){
return (
<div>{this.renderChildren()}</div>
)
}
})
Child = React.createClass({
render: function(){
return (<div style={{background: this.props.color}}>{'YOLO'}</div>)
}
})

Answer 1

What you are trying to do is not a recommended practice when working with React. Don't modify the DOM yourself, use state and props.
Children components:
var ChildrenA = React.createClass({
render: function() {
return <div style={{color: this.props.color}}>Hello A</div>;
}
});
App:
var App = React.createClass({
render: function() {
return (<div>
<div>Hello {this.props.name}</div>
<div>
<Container/>
</div>
</div>);
}
});
Container:
var Container = React.createClass({
getInitialState: function(){
return {color: "red"}
},
toggle: function(){
this.setState({
color: this.state.color == "red" ? "blue" : "red"
})
},
render: function() {
return (<div onClick={this.toggle}>
<ChildrenA color={this.state.color}/>
<ChildrenB/>
</div>);
}
});
JSFiddle: https://jsfiddle.net/3m8wLcgk/
You might want to check this out: Thinking in React