React-DOM Automatically Triggering OnClick Handler

I have a react-modal which shows some filters. It accepts an isOpen prop which hides or shows the Modal as per the value. The Modal opens successfully when clicked on 'Apply' butto

Solution 1:

So after a lot of debugging and head scratching, I finally figured out what the issue was. openAllFilters was getting invoked after call to closeAllFilters due to event propagation. The event is triggered by clicking anywhere on the modal. I didn't find any prop to disable this behaviour, so maybe it's a bug of react-modal. So the only fix required was to add e.stopPropagation()!

So the changed method becomes:

closeAllFilters = (e) => {
    this.setState({ showAllFilters: false });
    e.stopPropagation();
}

Thanks for all the help though!