title: ReactJS Transitions - Why doesn't this work?
body: <p>I'd like to transition one element as it changes to another element.</p>
  
  <p>I've got 3 examples:</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/zpao/U6u4K/" rel="nofollow">one that works, but uses a list of items that are kept around (jsfiddle)</a></li>
  <li><a href="http://jsfiddle.net/7KLWN/1/" rel="nofollow">one that doesnt work, and only keeps one item around, depending on the state (jsfiddle)</a></li>
  <li><a href="http://jsfiddle.net/E3H84/1/" rel="nofollow">another one that doesn't work, that keeps both items around and hides/shows them (jsfiddle using hide/show)</a></li>
  </ul>
  
  <p>What I want is more like the second one, which is a very slight variation of the first attempt that works.</p>
  
  <p><strong>Option 1:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>/** @jsx React.DOM */
  
  var ReactTransitionGroup = React.addons.TransitionGroup;
  
  var TodoList = React.createClass({
    getInitialState: function() {
      return {items: ['hello', 'world', 'click', 'me']};
    },
    handleAdd: function() {
      var newItems =
        this.state.items.concat([prompt('Enter some text')]);
      this.setState({items: newItems});
    },
    handleRemove: function(i) {
      var newItems = this.state.items;
      newItems.splice(i, 1)
      this.setState({items: newItems});
      },
  
      render: function() {
          var items = this.state.items.map(function(item, i) {
              return (
                  &lt;div key={item} onClick={this.handleRemove.bind(this, i)}&gt;
                      {item}
                  &lt;/div&gt;
              );
          }.bind(this));
  
          return (
              &lt;div&gt;
                  &lt;div&gt;&lt;button onClick={this.handleAdd} /&gt;&lt;/div&gt;
                  &lt;ReactTransitionGroup transitionName="example"&gt;
                      {items}
                  &lt;/ReactTransitionGroup&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var app = React.renderComponent(&lt;TodoList /&gt;, document.body);
  </code></pre>
  
  <p><strong>Option 2:</strong>
  JSX that doesn't work, but is closer to what I'd like to do (really, hide one view, and show another)</p>
  
  <pre class="lang-js prettyprint-override"><code>/** @jsx React.DOM */
  
  var ReactTransitionGroup = React.addons.TransitionGroup;
  
  var Test = React.createClass({
    getInitialState: function() {
      return {showOne:true}
    },
    onClick: function() {
      this.setState({showOne:! this.state.showOne});
    },
      render: function() {
        var result;
        if (this.state.showOne)
        {
          result = &lt;div ref="a"&gt;One&lt;/div&gt;
        }
        else 
        {
          result = &lt;div ref="a"&gt;Two&lt;/div&gt;
        }
  
          return (
              &lt;div&gt;
                  &lt;div&gt;&lt;button onClick={this.onClick}&gt;switch state&lt;/button&gt;&lt;/div&gt;
                  &lt;ReactTransitionGroup transitionName="example"&gt;
                      {result}
                  &lt;/ReactTransitionGroup&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var app = React.renderComponent(&lt;Test /&gt;, document.body);
  </code></pre>
  
  <p><strong>Option 3:</strong>
  Uses hide/show to keep the 2 views around, but still doesn't work.</p>
  
  <pre class="lang-js prettyprint-override"><code>/** @jsx React.DOM */
  
  var ReactTransitionGroup = React.addons.TransitionGroup;
  
  var Test = React.createClass({
    getInitialState: function() {
      return {showOne:true}
    },
    onClick: function() {
      this.setState({showOne:! this.state.showOne});
    },
      render: function() {
        var result;
        var c1 = this.state.showOne ? "hide" : "show";
        var c2 = this.state.showOne ? "show" : "hide";
  
  
        return (
              &lt;div&gt;
                  &lt;div&gt;&lt;button onClick={this.onClick}&gt;switch state&lt;/button&gt;&lt;/div&gt;
                  &lt;ReactTransitionGroup transitionName="example"&gt;
          &lt;div className={c1}&gt;One&lt;/div&gt;
          &lt;div className={c2}&gt;Two&lt;/div&gt;
                  &lt;/ReactTransitionGroup&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var app = React.renderComponent(&lt;Test /&gt;, document.body);
  </code></pre>
  
  <p>So long story short - How can I make a transition execute on switching from one main "component" to another? I don't get why option 1 works, but option 2 doesn't!</p>