title: Mouseover in map loop reactjs
body: <p>How to set hover for itself within map in Reactjs</p>
  
  <pre><code>  hoverOn = () =&gt; {
      this.setState({ hover: true});
    }
    hoverOff = () =&gt; { 
      this.setState({ hover: false });    
    }
  
  
  
      ...
      var components = posts.map((post, i) =&gt; (
      .....
          &lt;span className={this.state.hover ? 'showtooltip':'hidetooltip'} onHover={this.hoverOn} onMouseOut={this.hoverOff} onClick={(e) =&gt; this.viewPost(post, e)}&gt;&lt;i className="quickview-button"&gt;&lt;/i&gt;&lt;/span&gt; 
      ......
      ));
  </code></pre>
  
  <p>Since I use setState, everytime I hover on <code>span</code> it reflects to all list data which returned from map loop.
  How can I use hover to reflect on itself element? </p>
  
  <p>Thank so much</p>