onClick on stacked components - css

Question

I have two react arrow function components stacked on top of each other (using absolute positioning) and both of them have onClick attributes. The problem is, I want to click on the one that is on top, and both onClick functions trigger. Is there anyway to work around this?
This is a simplified version of the code:
const Card = ({...}) => {
const styles = {
optionsButton: {
minWidth:0,
minHeight: 0,
padding: "2px",
position: "absolute",
color: "#808080",
zIndex: 1,
right: 5,
top: 5,
'&:hover':{
backgroundColor: 'rgb(0, 0, 0, 0.1)'
}
},
}
const [hovering, setHovering] = useState(false)
const [isCardExpanded, setIsCardExpanded] = useState(false)
const expandCard = () => {
setIsCardExpanded(true)
}
const closeCard = () => {
setIsCardExpanded(false)
}
const mainPaperStyle = () => {
let style = {
padding: "10px",
cursor: "pointer",
position: "absolute",
"&:hover": {
filter: "brightness(97%)"
}
}
//Extra code here modifying color of the style, no positioning modifications
return style
}
const buttonAction = () => {
console.log("Do action!")
}
return(
<>
<Paper sx={mainPaperStyle()} onClick={expandCard} onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
Lorem Ipsum
{hovering &&
<Button variant="filled"
id="card-button"
sx={styles.optionsButton}
onClick={() => buttonAction()}>
<MoreVertIcon/>
</Button>
}
</Paper>
</>
)
}
And here is a screenshot of why I want two components stacked on top of each other:
Before hovering:
After hovering:
I want a Button to appear when hovering on top of the Paper component. The problem is, when I click the button, both expandCard and buttonAction trigger. (I am using Material UI btw)

Answer 1

You can use $event.stopPropagation();.
const firstFn = () => { // first function body };
const secondFn = (event: MouseEventHandler<HTMLButtonElement>) => {
$event.stopPropagation();
// second function body
}
So in your case you need to change function buttonAction to this
const buttonAction = (event) => {
$event.stopPropagation();
console.log("Do action!")
}
and return clause with
return(
<>
<Paper sx={mainPaperStyle()} onClick={expandCard} onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
Lorem Ipsum
{hovering &&
<Button variant="filled"
id="card-button"
sx={styles.optionsButton}
onClick={() => buttonAction($event)}>
<MoreVertIcon/>
</Button>
}
</Paper>
</>
)
You can learn about this more in here