score:0
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
Source: stackoverflow.com
Related Query
- Why do we add " ( ) => " before a function reference?
- May I know why we need to add a const/var/let sometimes before arrow function in React?
- Why does react call render function if I have not changed the reference of the state?
- Why do state changes before mount cause function execution but don't show on screen?
- Why is dispatch function relocating to home page before rendering logout function?
- Why doesn't react.component function definition contain a reference to .state property?
- Why does the component is not re-rendering when i add @action decorator to an react event handler function
- Why is my render function running before my componentWillMount
- Why does async function fail as soon as I reference value set by useParams react hook?
- Why aren't function reference in JSX "sugar"ified?
- Why do I need to run this function twice before it loads my data in from firebase?
- Why my function is being executed when I am just passing it's reference to the addEventListener?
- Why is a function call without an argument in setState called before setState?
- Why React detect the function reference as new?
- Why does this callback function not add bind.(this)?
- Redux Form : How to add function after validation success and before submit
- Why is React's useEffect hook not called here before the function returns?
- Why function not passed as reference in the eventlistener in ReactJS
- Why does my function run before componentDidMount
- Why is function on onClick on <li> tag runs before even clicked?
- react-testing-library why is toBeInTheDocument() not a function
- Add space in self closing tags before in self closing tags
- Why is the cleanup function from `useEffect` called on every render?
- Why does the Airbnb style guide say that relying on function name inference is discouraged?
- why do you need to bind a function in a constructor
- Why is my function being called twice in React?
- React - useState - why setTimeout function does not have latest state value?
- How to finish all fetch before executing next function in React?
- React hooks: Why do several useState setters in an async function cause several rerenders?
- Why is arrow syntax preferred over function declaration for functional React components?
More Query from same tag
- Push list of elements to component in React
- Javascript function to merge / combine two URLSearchParams
- Dispatch a Custom Event and test if it was correctly triggered (React TypeScript, Jest)
- Template not provided using create-react-app
- react-dropzone preview property missing
- How to programmatically add props to jsx component
- Integrating json-server with a react app deployed using aws amplify
- How to append nested state for a particular data?
- React Apollo Client useQuery Hook gql Uncaught TypeError:(...) is not a function
- Mapbox map is getting loaded before useEffect returns data
- ReactMarkdown is not displaying in React app
- How to save response data in a variable or state in js
- TypeError: instance.render is not a function in React
- Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object in ReactJS
- Webpack, React JSX, Babel: Module build failed, "unexpected token" empty?
- Strange behaviour in React component that includes message listener
- How to test functions in component with enzyme, jest, recompose, react
- Find a right way to convert cURL to a POST request axios
- Change fetch to async syntax
- Showing all the results of news api in react
- REACT- How do I raise a warning if a specific input field is empty with Yup?
- React-native-reanimated: Unable to resolve "./useValue"
- how to separate each object output using map method - React.js
- Background video not being displayed in React-Laravel App (API)
- Mapbox GL Js, dynamically changing map container size, can not resize map
- How does React update a component and its children after a state change?
- Observe resize of a dom element using rxJS
- Test react custom hook with mocking blob response
- What is [[Scopes]] in dispatch() of redux
- i am trying to upload file in react to firebase and setfileUrl.somehow its giving asyn promise error