How to disable event bubbling in React?

Question

JavaScript

return(

    <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}>
        <div className='portfolio-panel-background' ref={this.props.linkCircle} onTransitionEnd={this.showWorks} >
            <ReactCSSTransitionGroup
                transitionName='portfolio-panel__information'
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}>
                    {middleElementCircle}
            </ReactCSSTransitionGroup>
            <div style={diskStyle} className='portfolio-panel-disk' id='portfolio-panel-disk'>
                <ReactCSSTransitionGroup
                transitionName='work-item'
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}>
                    {workItems}
                </ReactCSSTransitionGroup>
            </div>
        </div>
    </div>
)

В данном примере кода отлавливается событие onTransitionEnd={this.showWorks}, когда заканчивается анимация, нужно отобразить элемент внутри ReactCSSTransitionGroup, ReactCSSTransitionGroup сам работает через transition и судя по всему срабатывает та же самая функция onTransitionEnd={this.showWorks} и элемент пропадает. В итоге анимация работает в одну и в другую сторону сразу. Я думаю это из-за всплытия события, как его можно отключить в React?

Answer 1

Just like everywhere else :

stop(e) {
  e.stopPropagation();
}

onTransitionEnd={this.stop}