title: Display text when hover on icon ReactJS
body: <p>I am new to react and want to display a text when the user hover over the icon. I am using material-ui and Reactjs  latest version. this the last code that I tried</p>
  <pre><code>    return (
      &lt;List className={classes.list}&gt;
          {items.map((item, index, list) =&gt; (
              &lt;Fragment key={item.id}&gt;
                      &lt;ListItemText primary={item.name} secondary={item.uniqueId}/&gt;
                      &lt;LensIcon style={{color: changeColorStatus(item)}}--this part is not working 
                                onMouseOver={() =&gt; setShowTextStatu(true)}
                                onMouseOut={() =&gt; setShowTextStatu(false)}
                                {showTextStatus?(&quot;Status&quot;): &quot;&quot;}/&gt;-- 
                  &lt;/ListItem&gt;
                  {index &lt; list.length - 1 ? &lt;Divider/&gt; : null}
              &lt;/Fragment&gt;
          ))}
      &lt;/List&gt;
  );}
  </code></pre>
  <p>this the styles</p>
  <pre><code>const useStyles = makeStyles(() =&gt; ({
  list: {
      maxHeight: '100%',
      overflow: 'auto',
  },
  icon: {
      width: '25px',
      height: '25px',
      filter: 'brightness(0) invert(1)',
  },
  hover: {
      border: '2px solid green'
  }}));
  </code></pre>
  <p>I tried these solutions but none worked with me:</p>
  <p><a href="https://upmostly.com/tutorials/react-onhover-event-handling-with-examples" rel="nofollow noreferrer">Show and Hide Something When Hovering Over Another Element</a></p>
  <p><a href="https://stackoverflow.com/questions/58975228/display-text-instead-of-icon-on-mouseover-react-material-ui-button">Display text instead of icon on mouseover - React material ui button</a></p>
  <p><a href="https://linguinecode.com/post/how-to-add-onmouseenter-or-onmouseover-in-reactjs" rel="nofollow noreferrer">How to add onMouseEnter or onMouseOver in ReactJS</a></p>