The value of the checkboxes does not change React-CodePudding

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.

CodePudding user response：

Put the console in outside the of the handleInputChanges for the get latest state value

For the best practices on input Change event pass the state name and state value so you can use easily use in handleChange function !

Here is my code pls check

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

  const handleInputChanges = (name, value) => {
    setData({ ...data, [name]: value });
  }
  console.log(data)

  return (
    <div>
      <FormControlLabel
        name="install"
        control={
          <Checkbox
            name="install"
            onChange={(e) => handleInputChanges('install', e.target.checked)}
            color="primary"
            value={data.install}
          />
        }
        label="Instalación" />

      <FormControlLabel
        name="warranty"
        control={
          <Checkbox
            name="warranty"
            onChange={(e) => handleInputChanges('warranty', e.target.checked)}
            color="primary"
            value={data.warranty}
          />
        }
        label="Garantía" />
    </div>
  );
};
export default App;)

CodePudding user response：

You should not access the old state directly when updating the state like this:

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

You better do it this way instead:

setData(data => ({
   ...data,
   [name]: eachValue
}))

You can combine my answer with Mr @mayur-vaghasiya's answer.