title: Multiple elements with the same ref, React
body: <p>I have a problem. It is: </p>
  
  <pre><code>let list = storage.map((element, index, array) =&gt; {
    return (
      &lt;li key={index} className="list-element"&gt;
        &lt;div className="title-wrapper" onMouseEnter={this.handleMouseEnter}&gt;
          &lt;p className="title"&gt;{array[index]['title']}&lt;/p&gt;
          &lt;p className="title title-full" ref={node =&gt; this.title = node}&gt;Text&lt;/p&gt;
        &lt;/div&gt;
      &lt;/li&gt;
        );
  }); 
  handleMouseEnter() {
      this.title.style.opacity = "1";
  }
  </code></pre>
  
  <p>So, when mouse enters .title-wrapper I want to set opacity to 1 on .title-full. But no matter on which .title-wrapper mouse enters, always opacity will be set to the last .title-full.
  The problem is easy to solve with querySelector but I read that using it is bad thing in React, isn't it?</p>