title: Hovering and removing item in React.js
body: <p>In my todolist I have a list of tasks posted in a column. Each task has its own state:</p>
  
  <pre><code>    state = {
          hover: false
      }
  </code></pre>
  
  <p>And events:</p>
  
  <pre><code>    switchHover = () =&gt; {
          this.setState({ hover: !this.state.hover });
      }
  
       onMouseEnter={this.switchHover}
       onMouseLeave={this.switchHover}
  </code></pre>
  
  <p>When the task is active, it displays the delete and edit icons whose classes change from state. When you delete the task, the lower task jumps and the onMouseEnter event is not activated, which leads to the fact that the state is the opposite of the desired. And my icons are shown when the item is not hovered, and aren't shown when item hovered. Here is my icon: </p>
  
  <pre><code>   &lt;span
         onClick={this.removeTask}
         className={this.state.hover ? 'task__remove-icon visible' :
             'task__remove-icon hidden'}&gt;
         &amp;#x2715;
     &lt;/span&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/W76O0.jpg" rel="nofollow noreferrer">here is image of my list</a>
  So, how I can fix this?</p>