title: reactjs - Render single icon on hover for list item rendered from array
body: <p>I have this sort of cards that are rendered from an array of objects.</p>
  
  <p><strong>Parent Component:</strong></p>
  
  <p><code>[{foo: 'bar', baz: [{ name: string, path: string: '/'}]</code></p>
  
  <p><code>state = {isHovering: false}</code></p>
  
  <pre><code>handleMouseHover = () =&gt; {
      const { isHovering } = this.state;
      this.setState({ isHovering: !isHovering });
  }
  </code></pre>
  
  <p>;</p>
  
  <p>I'm passing down <code>handleMouseHover()</code> and <code>isHovering</code> down as props to a child component.</p>
  
  <p>Resulting in something like this: </p>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>&lt;LinkContainer
    onMouseEnter={handleMouseHover}
    onMouseLeave={handleMouseHover}
    className="linkContainer"
  &gt;
  
   {isHovering &amp;&amp; (
     &lt;FontAwesomeIcon
       icon="copy"
       className="copyIcon"
       onClick={copyToClipboard}
     /&gt;
   )}
  </code></pre>
  
  <p>The result is 4 cards that contain 3 links. Each time I hover over a link I want the copy to clipboard icon to show. However, at the moment when I hover over any item it sets <code>isHovering</code> to <code>true</code> thus making all the icons visible. Ideally I just want the the icon for the link I hover over to become visible. Can someone help me to figure out a better solution or a refinement of my already written code.</p>
  
  <p>Much appreciated!</p>