Need a active class on first div

November 23, 2022

I’m trying to add an active class on the map element with hover. Everything is perfect but I need to add an active class on the first div when I do not hover over any.

Here is my code…

{WhatWeOfferData.map(({ img, title, para}, index) => {
        return (
          <div
              className={`${style.card} ${addActive.index === index && addActive.show ? `${style.active}` : ""}`}
              onMouseEnter={hoverOn}
              onMouseLeave={hoverOff}
              key={index}
              data-id={index}
          >
            <Image src={img} alt="offer_images" width={37} height={41} />
            <h2>{title}</h2>
            <p>{para}</p>
          </div>
        );
      })}

and

  let [addActive, setAddActive] = useState(false);
const hoverOn = (e) => {
    setAddActive({
      index: parseInt(e.currentTarget.dataset.id),
      show: true
    });
  };
  const hoverOff = (e) => {
    setAddActive({
      index: parseInt(e.currentTarget.dataset.id),
      show: false
    });
  };

>Solution :

Simply do this:

{
  WhatWeOfferData.map(({ img, title, para}, index) => {
    return (
      <div className={`${style.card} ${addActive.index === index && addActive.show ? `${style.active}` : index === 0 && !addActive.show ? `${style.active}` : ""}`}
          onMouseEnter={hoverOn}
          onMouseLeave={hoverOff}
          key={index}
          data-id={index}
      >
          <Image src={img} alt="offer_images" width={37} height={41} />
          <h2>{title}</h2>
          <p>{para}</p>
      </div>
    );
})}