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