score:0

Accepted answer

the problem is because the types don't match. have a look at the toggle documentation

onchange has the type:

(event: react.mouseevent<htmlelement>, checked?: boolean) => void

note that the checked is optional, but in your implementation it's not. it should work if you make it optional:

private _onchangecompactmode = (ev: react.mouseevent<htmlelement>, checked?: boolean): void => {
this.setstate({ iscompactmode: checked ?? false });

make sure to add a default now that checked is optional, like i did with checked ?? false

score:1

you have to be careful about the meaning of this in jsx callbacks. if you forget to bind this._onchangecompactmodeand pass it to onchange, this will be undefined when the function is actually called. that's why you have to use the arrow function, like you did. or the _onchangecompactmode itself has to be an arrow function, like so:

  _onchangecompactmode = () => {
    // your code
  }

then pass its reference:

onchange={this._onchangecompactmode}

they should work the same


Related Query

More Query from same tag