React toggle state doesn't change

I have 3 toggle list, and each data for checked value (true or false) is coming from api.
My code looks like this, but when clicking on each toggle it doesn’t chance state, stays active.
Anyone can help pls?

            <Toggle
              name="is_paused"
              checked={listing.is_paused}
              toggleChange={({ target: { checked } }) =>
                handleUpdate("is_paused", checked)
              }
              color="green"
            ></Toggle>
             <Toggle
              checked={listing.delivery}
              toggleChange={({ target: { checked } }) =>
                handleUpdate("delivery", checked)
              }
              disabled={listing.delivery && !listing.pickup}
              name="delivery"
              color="green"
            ></Toggle>

here => restless-haze-tereve
docs => React Component Extensions | Framework7 React Documentation

Sorry but still cannot access it: nifty-rubin-thm7b4
here is my code, my data come from api, so when user clicks on one toggle i’d like to create a body object and then send it to api to update state (but no problem for this one),
just pls check my code and tell me what’0s wrong, thanks.
for example if user check only “delivery”, i need to put to rest-api only delivery state (true or false) not all 3 toggles data. hope it’s clear :smiley:

look, i’m not a react guy.
and i might have missed something fundamental about it,
but:

  1. listing is not ‘reactive’ and it won’t change.
  2. toggleChange => onToggleChange
  3. handleUpdate => you pass bool and recive obj

i never use react, but here is how i would do it => [Toggle + callback] restless-haze-tereve

thanks, i saw your sandbox. but can you do listitems statically (like i did)? and one function const :smiley: it’s pretty difficult to understand your code :smiley:

Ok found it:

             <Toggle
              checked={data.value}
              onToggleChange={(e) => handleUpdate("name", e)}
            ></Toggle>

    const handleUpdate = (name, value) => {
      //e.preventDefault();
      console.log(name, value);
    };