hover over cards with React using the useref hook - reactjs

Question

I have used a useRef hook so that when I mouseover to particular card then the opacity of the other card becomes 0.4 I have a figure out a solution to this but I am thinking this might not be best solution and its quite lengthy too. Feel free to recommend me best solution regarding this. Here is my code and i have used bootstrap to create the card.
import React, { useRef } from 'react'
export default function Cardss() {
const cardOne = useRef();
const cardTwo = useRef();
const cardThree = useRef();
const mouseOverOpacityForCardOne = (e) => {
cardTwo.current.style.opacity = "0.4";
cardThree.current.style.opacity = "0.4";
}
const mouseOutOpacityForCardOne = (e) => {
cardTwo.current.style.opacity = "1";
cardThree.current.style.opacity = "1";
}
const mouseOverOpacityForCardTwo = (e) => {
cardOne.current.style.opacity = "0.4";
cardThree.current.style.opacity = "0.4";
}
const mouseOutOpacityForCardTwo = (e) => {
cardOne.current.style.opacity = "1";
cardThree.current.style.opacity = "1";
}
const mouseOverOpacityForCardThree = (e) => {
cardOne.current.style.opacity = "0.4";
cardTwo.current.style.opacity = "0.4";
}
const mouseOutOpacityForCardThree = (e) => {
cardOne.current.style.opacity = "1";
cardTwo.current.style.opacity = "1";
}
return (
<section className="container-fluid section-three">
<h2 className="display-3">Projects</h2>
<div className="row">
<div ref={cardOne} onMouseOver={mouseOverOpacityForCardOne} onMouseOut={mouseOutOpacityForCardOne} className={"col-md-4 col-12 mb-5"}>
<div className="card cards">
<img className="card-img-top" src="..." alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div ref={cardTwo} className={"col-md-4 col-12 mb-5"} onMouseOver={mouseOverOpacityForCardTwo} onMouseOut={mouseOutOpacityForCardTwo}>
<div className="card cards">
<img className="card-img-top" src="..." alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">Special title treatment</h5>
<p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div ref={cardThree} onMouseOver={mouseOverOpacityForCardThree} onMouseOut={mouseOutOpacityForCardThree} className={"col-md-4 col-12 mb-5"}>
<div className="card cards">
<img className="card-img-top" src="..." alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">Special title treatment</h5>
<p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</section>
)
}

Answer 1

You can accomplish using a combination of state variables and onMouseOver and onMouseLeave props.
Essentially, when the mouse is over a card, you store its index in the state variable, then have the class of the card be dynamic such that any index not equal to the state variable gets a class that applies the opacity: 0.4 to that card.
Here's a Codepen example illustrating this. I used opacity: 0.2 instead

Answer 2

To make the code less lengthy, let's first turn a card into a component.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
const Card = ({ // I'm using default parameters here
imageSrc = "https://source.unsplash.com/random/400x400",
title = "Special title treatment",
text = "With supporting text below as a natural lead-in to additional content.",
...props // pass the rest props to the wrapping div
}) => (
<div {...props}>
<div className="card cards">
<img className="card-img-top" src={imageSrc} alt="Unsplash Random" />
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{text}</p>
</div>
</div>
</div>
);
Then, to achieve the opacity change, you can track the active card (the one with mouse over) with state and apply CSS classes to style the cards:
// Cards.js
function Cards() {
const [active, setActive] = useState(-1); // I'm using -1 to indicate no active cards
const getCardClassName = index => {
if (active > -1 && index !== active) return "fadeOut";
return "";
};
return (
<section
className="container-fluid section-three"
>
<h2 className="display-3">Projects</h2>
<div className="row">
{[0, 1, 2].map(i => ( // or [...Array(3).keys()].map
<Card
key={i}
className={`col-md-4 col-12 mb-5 ${getCardClassName(i)}`}
onMouseOver={() => {
setActive(i);
}}
onMouseOut={() => {
setActive(-1);
}}
/>
))}
</div>
</section>
);
}
// style.css
.fadeOut {
opacity: 0.4;
}
Here is a working example: