I have a Post ponent which basically render's a card. If the post is clicked, then the URL should route to '/expand/'.

Now I have another ponent called DeleteTemplate which renders a button and clicking it render's a Modal.

Now, I have used this DeleteTemplate in my Post ponent.

Now, clicking the DeleteTemplate button is rendering the Modal. In the Modal if i select the Cancel option, the URL is getting routed to '/expand/' which shouldn't be happening.

I have a Post ponent which basically render's a card. If the post is clicked, then the URL should route to '/expand/'.

Now I have another ponent called DeleteTemplate which renders a button and clicking it render's a Modal.

Now, I have used this DeleteTemplate in my Post ponent.

Now, clicking the DeleteTemplate button is rendering the Modal. In the Modal if i select the Cancel option, the URL is getting routed to '/expand/' which shouldn't be happening.

• javascript
• reactjs
• events

Share Improve this question Follow asked Jul 20, 2018 at 11:29 Sreekar MouliSreekar Mouli 1,44255 gold badges2727 silver badges5050 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The click events of the buttons in your modal are bubbling up to the card. You need to add event.stopPropagation() to the onClick handlers of those buttons inside the modal.

So in your DeleteTemplate render function:

<Button color="secondary" onClick={this.cancel}>
    CANCEL
</Button>

with the cancel handler looking like this:

cancel(event) {
    event.stopPropagation();
    this.toggleModal();
}

Working example: