Working with React TransitionGroups

Question

I'm trying to get a simple "drawer" component working to test React's TransitionGroups. What I have so far below and on JSBin. If you try to run it, it works but I'm getting the error:

Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined

What am I doing wrong here?

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 <div className="drawer" ref="drawer">{this.props.children}</div>;
  }
});

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 (
      <ReactTransitionGroup transitionName="test" component={React.DOM.div}>
        {this.state.open && <DrawerInner key="content">{this.props.children}</DrawerInner>}
      </ReactTransitionGroup>
    );
  }
});

Answer 1

Looks like this is a bug in ReactTransitionGroup. I've just put up a fix ReactTransitionGroup: Fix moving from falsey child.