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" ponent="h2">
        {truck.name}
      </Typography>
      <Typography className="cuisine-type" ponent="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)
}

Update:

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)}
/>

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" ponent="h2">
        {truck.name}
      </Typography>
      <Typography className="cuisine-type" ponent="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)
}

Update:

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)}
/>

• javascript
• reactjs
• events
• stoppropagation

4 Answers 4

For you, just pass event along with the truck ID to your inner div function

See the following stopPropagation() method example ing from
https://www.w3schools./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>

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>

Check out this code. The function you want is called event.stopPropagation().

<body>
  <div id="parent">
    <button id="child" onclick="event.stopPropagation()">Child</button>
  </div>

  <script>
    var parent = document.querySelector('#parent');
      parent.addEventListener('click', function(){
        console.log("Parent clicked");
      });
    var child = document.querySelector('#child');
      child.addEventListener('click', function(){
        console.log("Child clicked");
      });
  </script>
</body>

You can try using Event.stopPropagation() in the child element function:

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

const removeFromFavorites = (truckId) => {
  props.removeFromFavoriteTrucks(props.dinerId, truckId);
  event.stopPropagation();
}

Demo:

const selectTruck = truckId => {
  alert('You have clicked Parent');
}
const removeFromFavorites = (truckId) => {
  alert('You have clicked Child');
  event.stopPropagation();
}

div {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  color: green;
}

<div onclick="selectTruck()">Parent
  <div onclick="removeFromFavorites(44)">Child</div>
</div>