vendredi 4 septembre 2020

Checkbox is not resetting itself on a re-render

I have a select drop down menu, and once an item is selected, a checkbox shows up, my problem is that if for example, I select "Robot1" and I check its checkbox, but then I decide to select "Robot2", when I do that the checkbox stays checked. I have tried added a state just for the checkbox (althought I dont think thats necessary, since the setSelectedRobot gets triggered and that triggers a re-render anyway...?!), I have also tried using the checked prop and the defaultChecked prop, but I could not get the checkbox to reset itself when a different option is selected.

const robotToAdd = { 
                     name: "", someBoolean: false 
                   }
const robots = [
                 {name: "Robot1", someBoolean: false},
                 {name: "Robot2", someBoolean: false},
                 {name: "Robot3", someBoolean: false},
                 {name: "Robot4", someBoolean: false}
               ]

function Component() {
  const [selectedRobot, setSelectedRobot] = useState({});
  const [checked, setChecked] = useState(false);

  return (
    <>
      <select onChange={(e) => { 
          const robot = robots.find(robot => robot.name === e.target.value);
          setSelectedRobot(robot)
      >
        <option>Choose a robot:</option>
        {robots.map(robot => 
           <option key={robot.name} value={robot.name}>{robot.name}</option>
        )} 
      </select>

      {Object.keys(selectedRobot).length > 0 && (
        <input checked={checked} 
               type="checkbox" 
               onChange={(e) => {
                 robotToAdd.someBoolean = e.target.checked
                 setChecked(e.target.checked)
               }
        />)
    </>
  )
}



Aucun commentaire:

Enregistrer un commentaire