Question about 'complete' and 'begin' functions

[Gabriel Cencic]

I'm fairly new with React and had some questions using this module.

The idea is to have an element that animates opacity and becomes hidden after animation based on a button toggle (opacity 0 doesn't works in this case since mouse events still works in an element with opacity 0, so display: none or visibility:hidden should work)

Problem: I need to animate opacity based on custom prop, it's ok and animates perfectly using opacity={this.props.opened ? 1 : 0}. But at the end of animation, i need to apply {visibility: 'hidden'} or {display: 'none'} to child component, and on animation start, i also need to apply back {visibility: 'visible'} for element to reaper.

I tried keeping this style in state but when i call setState in 'begin' method it enters in an infinite loop. also, i tried to set style directly using this.refs but it returns Uncaught TypeError: Can't add property style, object is not extensible

What are the best ways to approach this problem?