ReactJS: Development onClick within another component with event onClick

[Saumya]

The component has developments:

<li onClick={this.ITEM_handleClick}>
  <div>
    <span onClick={this.ITEM_closeClick} >&#215;</span>
    <p>{text}</p>
  </div>
</li>

• Question 1: How do cancel the external onClick at the internal onClick?
• Question 2: Will the current span be helped in a separate component?

[Laycee]

In one of the DOM knots, event click "slams" up the tree until it reaches the root or it's clear.

React sends the "syntic" to the processor. https://facebook.github.io/react/docs/events.html#syntheticevent which, among other things, has a method stopPropagate♪ This method (as well as its negative analogue) stops further developments up the DOM tree. This is how this method can be used in practice:

var Block = React.createClass({
    handleClose: function(e) {
        e.stopPropagation();
        alert('close');
    },
    handleClick: function(e) {
        alert('click');
    },
    render: function() {
        return (
            <div onClick={this.handleClick}>
                <span>Foo Bar Baz</span>
                <span onClick={this.handleClose}> &#215;</span>
            </div>
        );
    }
});

Here comes JSFiddle with https://jsfiddle.net/wcyrby1g/1/ ♪