title: Only display item hovered on react after map
body: <p>I am really surprised this isn't working as I anticipated.</p>
  
  <p>I want to show a username when the the person visiting the site hovers over the users's message. Below is the code I have so far. The problem is that when I hover over the message every username in the array that I have mapped over appears. How can I change this so that it is only one username? </p>
  
  <p>I guess I need to change the state to each user's message in a separate component, however, I wouldn't have thought this should be neccessary.</p>
  
  <pre><code>class App extends Component {
  
      state = {
          showUsername: false
      };
  
      showUsername = () =&gt; {
  
          this.setState({
              showUsername: true
          });
  
      }
  
      hideUsername = () =&gt; {
  
          this.setState({
              showUsername: false
          });
  
      }
  
      render() {
  
          let messageArr = this.props.messages.map(msg =&gt; {
  
              let name = `${msg.firstName} ${msg.lastName}`;
  
              return(
                  &lt;div key={msg.id}&gt;
  
                      {this.state.showUsername &amp;&amp; (
                          &lt;span&gt;{name}&lt;/span&gt;
                      )}
  
                      &lt;li&gt;&lt;span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}&gt;{msg.message}&lt;/span&gt;&lt;/li&gt;
                  &lt;/div&gt;
              );
          });
  
          return (
              &lt;ul&gt;
                  {messageArr}
              &lt;/ul&gt;
          );
      }
  }
  </code></pre>