reactjs - 将状态附加到动态呈现的元素

Question

我正在处理我的第一个 Gatsby 项目，我正在动态渲染 Contentful 的产品。我希望产品描述在悬停时显示。我知道如何在一张图像上执行此操作，但由于它是动态渲染的，我不知道如何为不同图像设置状态。现在，当您将鼠标悬停在一个上时，描述会显示在所有这些上。我无法在 .map 中设置状态。我可能只是在思考错误的方向，但我还没有在网上找到任何关于如何处理这个问题的信息。

let [isShown, setIsShown] = useState(false);

const productList = products.map((product) => {
    return (
      <div
        key={product.id}
        className="product-card"
    
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}
      >
        {isShown && (
          <p className="product-description">{product.productDescription}</p>
        )}
      </div>
    );
  });

如果有人能给我一个关于思考方向的线索，请提前感谢！

标签： reactjsdynamicreact-hooksaddeventlistener