title: Image flickering issue in React when image is conditionally rendered
body: <p>I have a header and I want to show an image on its right when the mouse is over the header. </p>
  
  <ul>
  <li><p>I am maintaining a variable <strong>editMode</strong> in the state which is set to  true/false </p></li>
  <li><p>Then I am conditionally rendering the image  using onMouseOver and onMouse events.</p></li>
  </ul>
  
  <p>Now when I hover over the header, the edit mode is set to true and the image shows up and when I move the cursor out of the header, the editMode sets to false and the image disappears.</p>
  
  <p>I am maintaining a variable <strong>editMode</strong> in the state which is set to  true/false consditionally rendering the image  using onMouseOver and onMouse: </p>
  
  <p><strong>Problem:</strong> When I hover over the edit icon, it starts flicker.</p>
  
  <pre><code>class TempComponent extends React.Component {
  constructor() {
      super()
      this.editModeToggler = this.editModeToggler.bind(this)
      this.state = {
          editMode: false
      }
  }
  
  editModeToggler() {
      console.log('called')
      this.setState({editMode: !this.state.editMode})
  }
  
  render() {
    return(
      &lt;div&gt;
        &lt;h3
          onMouseOut={this.editModeToggler} 
          onMouseOver={this.editModeToggler}
        &gt;
          Title
        &lt;/h3&gt;
        {this.state.editMode?
              &lt;img src='http://www.rebanet.it/images/banners/iscrizioni.png' /&gt;
          :
          null
        }
      &lt;/div&gt;
    )
   }
  }
  </code></pre>
  
  <p>You can find this code running over here: <a href="http://jsfiddle.net/Lu4w4v1c/2/" rel="nofollow noreferrer">http://jsfiddle.net/Lu4w4v1c/2/</a></p>
  
  <p>How do I stop this flickering. <strong>I have also tried using onMouseEnter and onMouseLeave</strong> as suggested <a href="https://stackoverflow.com/questions/15085932/jquery-mouseover-mouseout-flickers">here</a> but it did not work. I dont know how but using these two events resulted in opposite of what I want. The first time the component loaded, everything was fine but as soon as I hover over the icon the whole dynamics changes. The icon shows up when the mouse is not over the header and it does not show up when the mouse is over the header. Please help</p>
  
  <p>The code with onMouseEnter and onMouseLeave is over here: <a href="http://jsfiddle.net/Lu4w4v1c/3/" rel="nofollow noreferrer">http://jsfiddle.net/Lu4w4v1c/3/</a></p>