Menu
I'm having an issue with event bubbling. I have a card that has onClick function. On the card, there is a heart icon that also has an onClick function. When I click the heart icon on the card to unlike a card, the onClick fn for the entire card is executing as well, which takes me to a different page that renders more details about the card, specifically, a food truck. How can I stop this from happening?
I tried this:
const removeFromFavorites = (e, truckId) => {
props.removeFromFavoriteTrucks(props.dinerId, truckId);
e.stopPropagation();
}
But with this code, I'm getting an error that says: "e.stopPropagation is not a function."
the card:
<Card className="truck-card" onClick={() => selectTruck(truck.id)}>
<CardActionArea>
<CardMedia
className="truck-img"
image={truck.image}
style={{ width: '100%' }}
/>
<i
className="like-icon"
class={filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
onClick={() => removeFromFavorites(truck.id)}
/>
<CardContent className="truck-contents">
<Typography className="truck-name" gutterBottom variant="h5" component="h2">
{truck.name}
</Typography>
<Typography className="cuisine-type" component="h3">
{truck.cuisine_type}
</Typography>
</CardContent>
</CardActionArea>
</Card>
the click handler functions:
const selectTruck = truckId => {
props.setSelectedTruck(truckId);
setInitialMode(false);
}
const removeFromFavorites = (truckId) => {
props.removeFromFavoriteTrucks(props.dinerId, truckId)
}
So what I needed to do was pass e into my inner div function, call e.stopPropagation inside of it and then put e inside of my onClick as well. *Sorry for the lack of eloquence in explaining this. Here is the code:
const removeFromFavorites = (e, truckId) => {
props.removeFromFavoriteTrucks(props.dinerId, truckId);
e.stopPropagation();
}
<i
className="like-icon"
class={ filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
onClick={(e) => removeFromFavorites(e, truck.id)}
/>
853
For you, just pass event along with the truck ID to your inner div function
See the following stopPropagation() method example coming from
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_stoppropagation
<!DOCTYPE html>
<html>
<body>
<style>
div {
padding: 50px;
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<h1>The stopPropagation() Method</h1>
<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
<div onclick="func1(event)">DIV 1</div>
</div>
Stop propagation:
<input type="checkbox" id="check">
<p></p>
<p>Because DIV 1 is inside Div 2, both DIVs get clicked when you click on DIV 1.</p>
<p>Check the stop propagation checkbox, and try again.</p>
<p>The stopPropagation() method allows you to prevent propagation of the current event.</p>
<script>
function func1(event) {
alert("DIV 1");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function func2() {
alert("DIV 2");
}
</script>
</body>
</html>
answered Dec 12 '25 10:12
In your onClick event, you can pass the event as well, which you can use to find out who the sender was by using
<button value="hello!" onClick={e => alert(e.target)}>
Click me!
</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With