Say, I have this toggle:
<IonToggle id="IonToggleDarkMode" slot="end" checked={vars.darkMode} onChange={darkModeToggle}></IonToggle>
vars.darkMode
is the saved value of the toggle, so the state is set when loading the page.
So, know I want to write a function that gets called onChange and I can't figure out how to pass or access the "checked" attribute here...
Let's do this for example:
function darkModeToggle() {
togglestate = // ???
console.log( togglestate )
}
How do I do that?
I also read something about onChange={e => darkModeToggle(e)}
but to be honest, I don't get it ... e
doesn't seem to transport the checked
-attribute anywhere. I thought about running a selector for the toggles id and then reading its value but the API reference clearly states that 'value' is not to be used but 'checked' is.
Code for context:
import React from 'react';
//other import statements
const { useState } = React;
const DarkModeSwitch = () => {
// here you set the initial state using the useState hook:
const [isChecked, setIsChecked] = useState(false);
const darkModeToggle = () => {
console.log(isChecked);
setIsChecked(!isChecked);
}
}
//other logic, calculations, JS functions, etc
//UI content
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
return (
<IonContent>
<IonList>
<IonItem>
<IonLabel>DarkMode</IonLabel>
<IonToggle id="IonToggleDarkMode" slot="end" checked={isChecked} onChange={() => darkModeToggle())} />
</IonItem>
</IonList>
</IonContent>
)
}