vendredi 14 janvier 2022

The value of the checkboxes does not change React

I was doing a filter to my products, at the moment I have two checkboxes, one is the warranty and the other is the installation, I made my onChange method like this:

const [data, setData] = useState({
        install: false,
        warranty: false
})

const handleInputChanges = (e) => {
        const { name, type, checked, value } = e.target;
        const eachValue = type === 'checkbox' ? checked : value;

        setData({
            ...data,
            [name]: eachValue
        })
        console.log(data)
}

and the inputs are like this:

<FormControlLabel
         name="install"
         control={
         <Checkbox
                  name="install"
                  onChange={handleInputChanges}
                  color="primary"
                  value={data.install}
         />
         }
         label="Instalación"
/>
<FormControlLabel
         name="warranty"
         control={
         <Checkbox
                  name="warranty"
                  onChange={handleInputChanges}
                  color="primary"
                  value={data.warranty}
         />
         }
         label="Garantía"
/>

The problem is that when I click on the checkboxes the value is not changed, to change it I have to press it twice, but the value does not agree with the checkbox. Example: the checkbox is active (visually), but in the value it returns false and the same thing happens vice versa. This happens for both inputs.




Aucun commentaire:

Enregistrer un commentaire