ReactJS component: fadeIn / fadeOut on mouse-enter / mouse-leave

Question

I've created a simple component on reactjs (kind of a value-picker: plunker)

Now, I want the upper and lower parts of the control to be hidden (opacity=0) and animate to opacity=1 when user hovers the central div (.range-picker-selection) with mouse.

Since there's no way I can operate with DOM directly from functions of my component (reactjs discourages this) I guess I should change the state ( to something like state.expanded = true) and rely on reactjs to reflect the change.

But how can I achieve the animation effect?
With jQuery I would have used element.animate({opacity:0}) but now I don't have access to DOM

Answer 1

Something like this?

http://plnkr.co/edit/5tLWNTtpsSWBUCgnKwQO?p=preview

I updated the state to have a hovered attribute and two mouse enter / leave methods to set the value which are bound the .range-picker-selection element in the render function

<div className="range-picker-selection" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>

  onMouseEnterHandler: function () {
    this.setState({
      hovered: true
    })
  },
  onMouseLeaveHandler: function () {
    this.setState({
      hovered: false
    })  
  },

I also updated the render function to set the opacity to 0 or 1 accordingly for the elements.

style={{opacity: this.state.hovered ? 1 : 0}}

Finally, the actual animation is done with CSS animations

transition: opacity 1s;

I hope this helps