javascript - Leaflet - overwriting layer on click event -

i have mobx reaction, conditionaly maps layer.on({click}) function layer group.

reaction(       () => this.managingdates,       () => {         if (this.managingdates) {           this.mapstore.polygonlayer.eachlayer(layer => {             layer.on({               click: e => {                 this.mapstore.setmanagedparcel({                   feature: e.target.feature,                   bounds: layer.getbounds()                 });                 layer.setstyle({                   color: "red"                 });               }             });           });         } else {           this.mapstore.polygonlayer.eachlayer(layer => {             layer.on({               click: e => {                 this.mapstore.setactiveparcel(e.target.feature);                 layer.setstyle({                   color: "yellow"                 });               }             });           });         }       }     ); 

this fine first time around, when reaction triggers again different parameters, instead of overriding on click event, second function gets added (so both function called on click).

how remove previous layer.on click events before adding new one?

instead of adding/removing click listeners when managingdates changes, couldn't use ternary in 1 single listener per layer?

@observer class app extends component {   @observable managingdates = false;   layerlisteners = [];    componentdidmount () {     this.mapstore.polygonlayer.eachlayer(layer => {       const onclick = (e) => {         this.mapstore.setactiveparcel(e.target.feature);         layer.setstyle({           color: this.managingdates ? "red" : "yellow"         });       }       this.layerlisteners.push(onclick);       layer.on('click', onclick);     });   }    componentwillunmount () {     this.layerlisteners.foreach(f => {       layer.off('click', f);     });   }    render () {     // ...   } }