React - How to prevent click event from child component

Question

Before mark as duplicate, Its differents. I have this scenario, where I suppose to get some non-predefined element into a child component. In where when the user clicks on that element it's fired on the parent element events. How can I stop the event trigger on the parent when the child is clicked? Let me explain more with the following example-

So, it's basically an accordion list, by clicking on each item title div (list-container__item____title) the body div (list-container__item____body) will display.

Now, inside the title div, I have a link (list-container__item____title--link) which opens an overlay (child component). The overlay content comes from API call and the contains of it is HTML. I can't add some more functions for that element as I don't know what was included there, it's based on user choice. If in the HTML have some clickable element like an anchor, button, etc. the state (activeItem) is updated with empty ('') value. The result is the respective item is collapsed. Is there any way to prevent this event?

import React from 'react';

class DiamondFilters extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            activeItem: ''
        };
    }

    handleItemToggle = (name) => {
        if (this.state.activeItem === name) {
            this.setState({ activeItem: '' })
        } else {
            this.setState({ activeItem: name })
        }
    }

    render() {
        return (
            <div className="menu">
                <div className="list-container">
                    <div className={`list-container__item ${this.state.activeItem === "item1" ? 'active' : ''}`}>
                        <div className="list-container__item____title" onClick={() => this.handleItemToggle('item1')}>
                            <a className="list-container__item____title--link">Click Here 1</a>
                            <OverlayModal modalType="full" modalName="item1" />
                        </div>
                        <div className="list-container__item____body">
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                        </div>
                    </div>
                    <div className={`list-container__item ${this.state.activeItem === "item2" ? 'active' : ''}`}>
                        <div className="list-container__item____title" onClick={() => this.handleItemToggle('item2')}>
                            <a className="list-container__item____title--link">Click Here 2</a>
                            <OverlayModal modalType="full" modalName="item2" />
                        </div>
                        <div className="list-container__item____body">
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

Nope! It's not, the link you comment out, there was some predefine element attached with click event here is the different case. — Daniel Smith, Sep 26 '19 at 15:20
Possible duplicate of [React prevent event bubbling in nested components on click](https://stackoverflow.com/questions/38619981/react-prevent-event-bubbling-in-nested-components-on-click) — Joseph D., Sep 26 '19 at 15:34

score 7 · Accepted Answer · answered Sep 26 '19 at 15:43

7

You could wrap your OverlayModal in another component (a 'Click Muncher') that prevents any click bubbling:

const ClickMuncher = ({ children }) => {
  return <div onClick={e => e.stopPropagation()}>{children}</div>;
};

And use it like this:

<div className="list-container__item____title" onClick={() => this.handleItemToggle('item1')}>
  <a className="list-container__item____title--link">Click Here 1</a>
  <ClickMuncher>
      <OverlayModal modalType="full" modalName="item1" />
  </ClickMuncher>
</div>

answered Sep 26 '19 at 15:43

Will Jenkins

9,507
1
27
46

will it work if having some conent with click event attached? – Daniel Smith Sep 28 '19 at 15:24
so you want to wrap overlay modal conent with a div with attached stopPropagarltion attached? – Daniel Smith Sep 28 '19 at 15:26
Yes, it will still work. It prevents click bubbling, not click handling. – Will Jenkins Sep 28 '19 at 19:13
Okey Thanks. So ClickMuncher need to define under render() method? – Daniel Smith Sep 30 '19 at 05:00
Yes, around any elements or Components whose clicks you need to capture – Will Jenkins Sep 30 '19 at 07:14

Mickey · Answer 2 · 2019-09-26T16:42:56.720

2

If you need to handle these clicks with a callback that takes parameters, you can just add the event as one of those params and move the Event.stopPropagation() call inside the callback.

handleItemTitleLinkClick = (e, foo, bar) => {
    e.stopPropagation();
    // do stuff
}

...

<a className="list-container__item____title--link" onClick={e => handleItemTitleLinkClick(e, "whatever", "args")}>Click Here 1</a>

edited Sep 26 '19 at 16:42

answered Sep 26 '19 at 15:20

Mickey

570
3
11

Can I do it on my function, as I have to pass some parms as well – Daniel Smith Sep 26 '19 at 15:35

score 0 · Answer 3 · answered Sep 26 '19 at 15:29

Another possible solution is to move your OverlayModal component outside of your collapsibles. That way any clicks made on the modal wouldn't invoke the click handler that's associated to your collapsible.

  render() {
    return (
      <div className="menu">
        <div className="list-container">
          <div
            className={`list-container__item ${
              this.state.activeItem === "item1" ? "active" : ""
            }`}
          >
            <div
              className="list-container__item____title"
              onClick={() => this.handleItemToggle("item1")}
            >
              <a className="list-container__item____title--link">
                Click Here 1
              </a>
            </div>
            <div className="list-container__item____body">
              <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by
                injected humour, or randomised words which don't look even
                slightly believable.
              </p>
            </div>
          </div>
          <div
            className={`list-container__item ${
              this.state.activeItem === "item2" ? "active" : ""
            }`}
          >
            <div
              className="list-container__item____title"
              onClick={() => this.handleItemToggle("item2")}
            >
              <a className="list-container__item____title--link">
                Click Here 2
              </a>
            </div>
            <div className="list-container__item____body">
              <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by
                injected humour, or randomised words which don't look even
                slightly believable.
              </p>
            </div>
          </div>
          <OverlayModal modalType="full" modalName={this.state.activeItem} />
        </div>
      </div>
    );
  }

React - How to prevent click event from child component

3 Answers3