How To Modify The DOM Directly In ReactJS

Let's say I have two arrays selectedFoobars and unselectedFoobars. These are my data and they are rendered as lists next to each other using ReactJS. When the user clicks on an ele

Solution 1:

To manipulate a React component's "actual DOM" you can grab a reference of it using getDOMNode().

However, referencing the "actual DOM" is not necessarily the only solution. For instance, instead of separating your foobars into selected/unselected arrays, you could pool them into a single array where each item specifies itself as being selected or not. For example:

getInitialState: function(){
  return {
    foobars: [ {text: 'item1', selected: false} ]
},

render: function(){
  return this.state.foobars.map(function(item){
    return <Foobar selected={item.selected}>{ item.text }</Foobar>;
  });
}

Then your Foobar component could set the className based on this.props.selected. You could then utilize the animation addon or some other CSS3 transition technique.