onClick event of child component is not getting triggered for stacked parent and child component

Question

I have the following two components with thier respective onClick() handlers. Problem is doSomethingElse is never getting and directly doSomething is getting called.

<ParentComponent onClick={this.doSomething}>
   <ChildComponent onClick={this.doSomethingElse} />
</Parent>

Child is shown as like proover on parent using z-index.

class Parent extends React.Component {
  constructor(props) {
    super(props);

  }

  handleP = (e) => {
    alert("parent")
  };

  render() {
    return (

      <div onClick={this.handleP} style={{
        left: 100,
        top: 100,
        zIndex: 100,
        position: 'absolute',
      }}>
      Parent Text
        <Child  />
      </div>          

    )
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

  }

  handleC = (e) => {
    alert("child")
  };

  render() {
    return (

      <div onClick={this.handleC} style={{
        left: 1,
        top: 1,
        zIndex: 1000,
        position: 'absolute',
      }}>
      Child Text  
      </div>          

    )
  }
}



React.render(
  <Parent />,
  document.getElementById('react_example')
);

Jsbin

can you create a working example and show the actual full code? — Mayank Shukla, Nov 23 '18 at 06:27
It would be useful if we know what Parent and Child Components are! — Lucifer, Nov 23 '18 at 06:54
@MayankShukla added sample code please check edited question. But in this example code is working but in my case its not working. — Sandip Pingle, Nov 23 '18 at 07:20
try to use the same structure as you are using in your actual code. — Mayank Shukla, Nov 23 '18 at 07:33
[It seems to be working fine](https://codesandbox.io/s/03xpqmkl2v). — Tholle, Nov 23 '18 at 08:43

score 0 · Answer 1 · answered Nov 25 '18 at 15:58

@SandipPingle the issue is because, by default a click event bubbles till window. So after the child handler is invoked the event bubbles to parent component. For that you need to stop the event propogation. Refer to this question and this sandbox for a sample fixed version based on this answer :)

onClick event of child component is not getting triggered for stacked parent and child component

1 Answers1