How can I Change styles on hover of an appropriate item react? Now the styles are changed of all of the items at a time. Hovering on add to cart button I need to change only the chosen div styles. https://codesandbox.io/s/trusting-moon-djocul?file=/src/components/Category.js**

import React, { useState } from "react";

import styles from "./category.module.css";
import Categories from "./Categories";

const Category = () => {
  const [hovered, setHovered] = useState(false);
  const [data, setData] = useState(Categories);

  const style = hovered
    ? { backgroundColor: "#ffcbcb", color: "#fff", transition: "all 0.5s ease" }
    : {};
  const filterResult = (catItem) => {
    const result = Categories.filter((curData) => curData.category === catItem);

    setData(result);
  };

  return (
    <>
        <div className={styles.items}>
          {data.map((value) => {
            const { id, title, price, description } = value;
            return (
              <>
                <div className={styles.item} key={id} style={style}>
                  <h1>{title}</h1>
                  <p>
                    {price} <span>$</span>
                  </p>
                  <p>{description}</p>
                  <button
                    onm ouseEnter={() => setHovered(true)}
                    onm ouseLeave={() => setHovered(false)}
                    className={styles.btn}
                  >
                    Add to Cart
                  </button>
                </div>
              </>
          
  );
};

export default Category;

CodePudding user response：

That's because you have a single "hovered" state shared between all your cards, you should create a "Card" component and have that component have its own hovered state

  return (
    <>
        <div className={styles.items}>
          {data.map((value) => {
            return (
              <>
               <Card {...props} />
              </>
          
  );

CodePudding user response：

Problem

This issue is occurring cause you are applying CSS to all the cards. The only small thing you are missing in your logic is adding CSS to the only card whose button was being hovered.

Solution

That can be achieved by using event objects on mouse enter and mouse leave events.

<div className={styles.item} key={id} style={style}>
  <h1>{title}</h1>
  <p>
    {price} <span>$</span>
  </p>
  <p>{description}</p>
  <button
    onm ouseEnter={(e) =>
      e.currentTarget.parentElement.classList.add("active_card")
    }
    onm ouseLeave={(e) =>
      e.currentTarget.parentElement.classList.remove("active_card")
    }
    className={styles.btn}
    >
     Add to Cart
 </button>
</div>

This will add a class of "active_card" on the card whose Add To Card button is being hovered, then you can apply your desired styling to that class.

.active_card {
  background-color: #ffcbcb !important;
}

Example

Working Code Sandbox Example