useState, Checkbox wont change to false,-CodePudding

I want to enable/disable a button, if a person checked all checkboxes, but my console.log says all time true, anyway if it is checked or not. Is there another way then:

    setChecked1(prevValue => !prevValue)
    console.log(preCondition1)
  }

i like to use useState obj for shorter script:


const [checked, setChecked] = useState({
    ableStatus: true,
    unableStatus: "",
    preCondition1: "",
    preCondition2: "true",
    preCondition3: "true",
    preCondition4: "true",
    preCondition5: "true"

  });
  const [buttonState, setButtonState] = useState(true);
  

  const handleButtonState = () => {
    if ( checked.preCondition1 === true) {
      setButtonState(false);
    } else {
      setButtonState(true);
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setChecked((prevState) => {
      return {
        ...prevState,
        [name]: value,
      };
    });
    console.log(checked.preCondition1)
    handleButtonState();
    }


 const {    
    preCondition1,
    preCondition2,
    preCondition3,
    preCondition4,
    preCondition5,
   
    
  } = checked;
...

<Checkbox
                defaultChecked="checked"
                onChange={handleChange}
                value={preCondition1}
                name="preCondition1"
                inputProps={{ "aria-label": "controlled" }}
                sx={{
                  color: red[200],
                  "&.Mui-checked": {
                    color: green[800],
                  },
                }}
              />

CodePudding user response：

for booleans in react state you can simply do a:

SetState(!state);

Hope this helps :)

CodePudding user response：

the answer:

const handleChange = (e) => {
      setValues((prevState) => {
        const [name] = e.target
        return{    
          ...prevState,
          [name]: !prevState[name]
      
        }})
        test()
      }