React - What am i doing wrong about checkbox and axios?

Question

It seems like i've a big misunderstanding of checkboxes/toggle. What I'm trying to do is, to change status of checkbox/toggle from true to false and otherway around.

The axios request working fine. I can change any text back and force. But when ever it comes to toggle a value I'm failing. It always ends in: I can set the value from false to true. But never from true to false.

My state shows correct value so when i click the toggle it shows in console: true, false, true, false...

But when I try to send it to the server and print console.log(req.body.isClosed); in my backend only in the case from false to true it will print a "true". From false to true it's a "undefined"

So ya here i am i tried since 5h to fix it. Used pure checkboxes, react-multi-switch-toggle and now mui switch... Hope someone can help me

Update: When i change isClosed: isClosed ? isClosed : settings.isClosed to isClosed: isClosed ? false: settings.isClosed

It works but only if my toggle is on true. If my button is state false it will still print undefined. So at the moment it can only send something that work when the state of of my toggle is true. It doesn't matter what i send then everything works

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useSelector, useDispatch } from 'react-redux';

import { systemSettings } from '../../../../../redux/actions/systemSettingsAction';
import Switch from '@mui/material/Switch';

const IsClosed = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(systemSettings());
  }, []);

  const settingsstate = useSelector((state) => state.systemSettingsReducer);
  const { settings } = settingsstate;

  const [isClosed, setIsClosed] = useState(
    settings[0]?.isClosed === true ? true : false
  );

  console.log(isClosed);
  const handleIsClosed = (event) => {
    setIsClosed(event.target.checked);
  };

  const updateInfor = () => {
    try {
      axios.patch(
        '/api/settings',
        {
          id: settings[0]?._id,
          isClosed: isClosed ? isClosed : settings.isClosed,
        }
      );
      window.location.reload(true);
    } catch (err) {}
  };

  return (
    <div>
      <Switch
        checked={isClosed}
        onChange={handleIsClosed}
        inputProps={{ 'aria-label': 'controlled' }}
      />
      <button
        onClick={updateInfor}
        className='block w-full bg-yellow-400 hover:bg-yellow-300 p-4 mt-2 rounded text-black hover:text-yellow-800 transition duration-300'
      >
        Confirm
      </button>
    </div>
  );
};

export default IsClosed;

Answer 1

I think that problem is here:

const handleIsClosed = (event) => {
    setIsClosed(event.target.checked);
  };
  

You are setting the current state of the switch to your isClosed state, and the actual logic is should be inversely

So onChange you should toggle your current state, and you can do it like this:

const handleIsClosed = () => {
    setIsClosed(!isClosed);
  };

This will take your current state of isClosed, and toggle it (so if it was true it will be false, and vice versa)