reactjs - React TransitionGroup not unmounting children on state change -

i'm building sidebar component react transition group. relevant code goes follows:

function firstchild(props) {   const childrenarray = react.children.toarray(props.children);   return childrenarray[0] || null; }  class sidebar extends component {    componentwillenter(cb) { console.log('entering'); cb() }    componentwillleave(cb) { console.log('leaving'); cb() }     render() {       // return sidebar jsx    }  }  class nav extends component {   ...    togglesidebar() {      const newstate = !this.state.show;     this.setstate({ show: newstate })   }    render() {     return (       <transitiongroup component={firstchild}>         { (this.state.show == true) ? <sidebar /> : null }       </transitiongroup>     )   } } 

the problem when try toggle sidebar, none of lifecycle hooks being triggered. on first click, sidebar added dom , componentdidmount called not componentwillenter. when click again hide it, state.show gets set correctly false sidebar doesn't hide , no lifecycle hooks triggered time.

i'm wondering if did ternary operator correctly conditionally render sidebar or if reason because i'm rendering 1 child under transitiongroup (for that, used firstchild method found here).

the issue in rendering logic. reason

{ (this.state.show == true) ? <sidebar /> : null } 

wouldn't trigger transitiongroup lifecycle functions componentwillenter / componentwillleave changing to

{ this.state.show && <sidebar } 

fixed that.