React - Prevent Event Trigger on Parent From Child

Question

I have this scenario, where when parent element is clicked, it flips to show a child element with different colours. Unfortunately, when the user clicks on one of the colours, t

Answer 1

I wanted to invoke function on props but at the same time wanted to stop event propagation from child to parent, here is how its handled

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      
           this.closeClicked(e, this.props) }>
              ×
          
          
            { displayLabel }
          
      
    );
  }
}

export default LabelCancelable;