title: Displaying text on only one image at at time in React
body: <p>I am working on a portfolio page using React and Tailwind. I am trying to get to where when you hover over each image, it will display the text at the bottom of a single image. Right now when I hover over the image, all text displays on all images. How would I fix this? Also, I know there has to be a way to clean this up, I was trying to get it work first. Thank you for and advice you might have!</p>
  <pre><code>const Experience = () =&gt; {
    const [isHovering, setIsHovering] = useState(false);
  
    const handleMouseOver = () =&gt; {
      setIsHovering(true);
    }
  
    const handleMouseOut = () =&gt; {
      setIsHovering(false);
    }
  
    return (
      &lt;div
        name=&quot;experience&quot;
        className=&quot;w-full h-screen bg-[#0a192f] text-gray-300&quot;
      &gt;
        &lt;div className=&quot;max-w-[1000px] mx-auto flex flex-col justify-center w-full h-full&quot;&gt;
          &lt;div&gt;
            &lt;p className=&quot;text-4xl font-bold inline border-b-4 border-purple-800&quot;&gt;
              Experience
            &lt;/p&gt;
            &lt;p className=&quot;py-4&quot;&gt;Technologies I have worked with&lt;/p&gt;
          &lt;/div&gt;
          &lt;div className=&quot;w-full grid grid-cols-2 sm:grid-cols-4 gap-4 text-center py-8&quot;&gt;
            &lt;div className=&quot;shadow-md shadow-[#040c16] hover:scale-110 duration-500&quot;&gt;
              &lt;img
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                className=&quot;w-20 mx-auto&quot;
                src={CssLogo}
                alt=&quot;Css Logo&quot;
              /&gt;
              {isHovering ? &lt;p className=&quot;font-bold&quot;&gt;CSS&lt;/p&gt; : &quot;&quot;}
            &lt;/div&gt;
            &lt;div className=&quot;shadow-md shadow-[#040c16] hover:scale-110 duration-500&quot;&gt;
              &lt;img
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                className=&quot;w-20 mx-auto&quot;
                src={HtmlLogo}
                alt=&quot;HTML logo&quot;
              /&gt;
              {isHovering ? &lt;p className=&quot;font-bold&quot;&gt;HTML&lt;/p&gt; : handleMouseOut}
            &lt;/div&gt;
            &lt;div className=&quot;shadow-md shadow-[#040c16] hover:scale-110 duration-500&quot;&gt;
              &lt;img
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                className=&quot;w-20 mx-auto&quot;
                src={JavaScriptLogo}
                alt=&quot;Js Logo&quot;
              /&gt;
              {isHovering ? (
                &lt;p className=&quot;font-bold&quot;&gt;JavaScript&lt;/p&gt;
              ) : (
                handleMouseOut
              )}
            &lt;/div&gt;
            &lt;div className=&quot;shadow-md shadow-[#040c16] hover:scale-110 duration-500&quot;&gt;
              &lt;img
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                className=&quot;w-20 mx-auto&quot;
                src={MongoLogo}
                alt=&quot;Mongo Logo&quot;
              /&gt;
              {isHovering ? (
                &lt;p className=&quot;font-bold&quot;&gt;Mongo DB&lt;/p&gt;
              ) : (
                ''
              )}
            &lt;/div&gt;
            &lt;div className=&quot;shadow-md shadow-[#040c16] hover:scale-110 duration-500&quot;&gt;
              &lt;img
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                className=&quot;w-20 mx-auto&quot;
                src={MysqlLogo}
                alt=&quot;Mysql Logo&quot;
              /&gt;
              {isHovering ? (
                &lt;p className=&quot;font-bold&quot;&gt;MySQL&lt;/p&gt;
              ) : (
                ''
              )}
            &lt;/div&gt;
            &lt;div className=&quot;shadow-md shadow-[#040c16] hover:scale-110 duration-500&quot;&gt;
              &lt;img
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                className=&quot;w-20 mx-auto&quot;
                src={NodeLogo}
                alt=&quot;Node Logo&quot;
              /&gt;
              {isHovering ? (
                &lt;p className=&quot;font-bold&quot;&gt;Node JS&lt;/p&gt;
              ) : (
                ''
              )}
            &lt;/div&gt;
  </code></pre>