title: Working with React TransitionGroups
body: <p>I'm trying to get a simple "drawer" component working to test <a href="http://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup" rel="nofollow">React's TransitionGroups</a>. What I have so far below and on <a href="http://jsbin.com/cedogulu/6/edit?html,console,output" rel="nofollow">JSBin</a>. If you try to run it, it works but I'm getting the error: </p>
  
  <p><strong>Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined</strong></p>
  
  <p>What am I doing wrong here?</p>
  
  <pre><code>var DrawerInner = React.createClass({
    componentWillEnter: function(cb) {
      var $el = $(this.getDOMNode());
      var height = $el[0].scrollHeight;
      $el.stop(true).height(0).animate({height:height}, 200, cb);
    },
    componentWillLeave: function(cb) {
      var $el = $(this.getDOMNode());
      $el.stop(true).animate({height:0}, 200, cb);
    },
    render: function() {
      return &lt;div className="drawer" ref="drawer"&gt;{this.props.children}&lt;/div&gt;;
    }
  });
  
  var Drawer = React.createClass({
    getInitialState: function() {
      return {
        open: false
      };
    },
    componentWillMount: function() {
      this.setState({
        open: this.props.open
      });
    },
    componentWillReceiveProps: function(props) {
      this.setState({
        open: props.open
      });
    },
    open: function() {
      this.setState({
        open: true
      });
    },
    close: function() {
      this.setState({
        open: false
      });
    },
    toggle: function() {
      this.setState({
        open: !this.state.open
      });
    },
    render: function() {
      return (
        &lt;ReactTransitionGroup transitionName="test" component={React.DOM.div}&gt;
          {this.state.open &amp;&amp; &lt;DrawerInner key="content"&gt;{this.props.children}&lt;/DrawerInner&gt;}
        &lt;/ReactTransitionGroup&gt;
      );
    }
  });
  </code></pre>