React trouble with event.stopPropagation()

Question

I have two components here, the first one is a table, and I have an on-click event attached to one of the <td> 's in every row that summons a little tooltip-like window:

<td onClick={ () => loadSelectorWindow(p.product_id) }>
    {
        p.selectorActive && 
        <SelectorWindow 
            cancelWindow={this.cancelSelectorWindow} 
            product_id={p.product_id}/>
    }
</td>

The function bound to the <td> click will search through all products in state and flip a boolean on the selected product to display the tooltip.

  loadSelectorWindow = (product_id) => {                                                         
        this.setState({ products: this.state.products.map( p => {                       
            if (p.product_id == product_id) {                                                         
                p.variationSelectorActive = true                                                      
            } else {                                                                                  
                p.variationSelectorActive = false                                                     
            }                                                                                         
            return p                                                                                  
        })})                                                                                          
    }   

However, the tooltip also needs a button with a window cancel event linked to it:

// within <SelectorWindow />
<p onClick={ () => {cancelWindow(event)} }> X </p>

This function cycles through state and sets all of the display booleans to false.

cancelSelectorWindow = (event) => {
    event.stopPropagation()
    this.setState ({ products: this.state.products.map( p => {
        p.variationSelectorActive = false
        return p
    })})
}

Putting breakpoints in the code I can see that the cancel button is correctly calling the cancel function and setting the displayTooltip boolean to false, temporarily. The problem is, the loadSelectorWindow is ALSO getting fired when the cancelWindow button is clicked, and the boolean is set back to true DX.

This is why I attempted to put the event.stopPropagation call in there but obviously something is still calling it. There is no other place in my code that the loadSelectorWindow function is mentioned... Any ideas how I can stop it from getting called?

Answer 1

You have one html element nested inside the other, so if you click the inner one then you will receive onClick events for both. So that is what you are getting. You need to redesign the layout of the page so that does not happen.

Answer 2

I forgot to pass event to the cancelWindow callback function. React why is your syntax so confusing sometimes...

Fix:

<p onClick={ (event) => {cancelWindow(event)} }> X </p>