How do I pass a toggles state with its onChange-call in Ionic React?

Question

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>
  )
}

Answer 1

Since you have a functional component you have to use the useState hook to handle the state of your darkMode. In your JSX you use the state to handle the IonToggle (or the checkbox) by setting the isChecked state to the checked prop. Here is an example how you could do this with a simple checkbox:

const { useState } = React;

const DarkModeSwitch = () => {
  
    // here you set the initial state using the
    // useState hook:
    const [isChecked, setIsChecked] = useState(false);

    const darkModeToggle = () => {
    // toggle the state 'isChecked'
    // this makes it true if false and vice versa
    setIsChecked(!isChecked);
  }
  
    return (
    <div>
        <input 
        type="checkbox" 
        checked={isChecked} 
        onChange={() => darkModeToggle()} 
      />
    </div>
  )
}

Here is a working example: Codepen

Edit: Using your context-code it could look like this:

import React, { useState } from 'react';

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {

  // here you set the initial state using the useState hook:
  const [isChecked, setIsChecked] = useState(false);
  
  const darkModeToggle = () => {
    setIsChecked(!isChecked);
  }

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>DarkMode</IonLabel>
          <IonToggle id="IonToggleDarkMode" slot="end" checked={isChecked} onChange={() => darkModeToggle())} />
        </IonItem>
      </IonList>
    </IonContent>
  )
}

Answer 2

code

  const [checked, setChecked] = useState(false);

template

<IonToggle checked={checked} 
       onIonChange={(e) => setChecked(e.detail.checked)} />