How do I prevent the onClick of the parent going off when clicking the child?

Question

I have this component code:

const myCardItem = ({ item }) => {

    function clickItem(){
        alert('Item clicked');
    }

    function clickMe(){
        alert('Button clicked');
    }

    return (
        <div className="myCardItem" onClick={clickItem}>
            <i className="fa fa-clock-o"/>&nbsp;{item.planDate}
            <br />
            <i className="fa fa-location-arrow"/>&nbsp;{item.destination}
            <br />
            <Button bsStyle="primary" onClick={clickMe}>Click Me</Button>
        </div>
    );
}

If I click the button I get first:

Followed by:

Which makes sense, because the button is a child under the myCardItem. But that's not what I want. Clicking the myCardItem will load a new view, while clicking the button would open a modal dialog. Having both go off would break the page.

How can I prevent the parent click being called?

It's not as easy as doing a return false in clickMe() ...

score 6 · Accepted Answer · edited Nov 30 '17 at 10:53

6

Use event.stopPropagation() or event.stopImmediatePropagation() these stop event bubbling and end bubble of events where it is called.

edited Nov 30 '17 at 10:53

Deckerz

2,606
14
33

answered Nov 30 '17 at 10:52

simbathesailor

3,681
2
19
30

2

Presenting your solution with a revised version of OP's code is a way to go. – Junaid Nov 30 '17 at 10:53
yes You are right. – simbathesailor Nov 30 '17 at 10:54

How do I prevent the onClick of the parent going off when clicking the child?

1 Answers1