Level 102
No need to pass e. That is default behavior
onChange={handleChange}
Start by console logging the data.roles to see if the array updates with the checked ids
Jan 25, 2022
17
Level 2
Checkboxes not unchecking - React + Inertia
I have checkboxes for user roles. They are successfully displaying the correct roles for the user on my Edit.js form. But when I try to uncheck/check to edit the user roles, they can't respond.
Here's my <Checkbox /> component:
export default function Checkbox({ name, value, handleChange, checked, id, className }) {
return (
<input type="checkbox" name={name} id={id} checked={checked} value={value} className={`rounded border-indigo-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50` + className} onChange={(e) => handleChange(e)}
/>
);
}
This is the <Checkbox /> I have in my Edit.js form:
<Checkbox name="roles[]" id={`role${role.id}`} value={role.id} checked={data.roles.includes(role.id)} handleChange={handleChecked} required />
This is my handleChecked() event:
const handleChecked = (e) => {
let id = e.target.value;
e.target.checked
? setData("roles", [...data.roles, id])
: setData(
"roles",
data.roles.filter((item) => {
return item !== id;
})
);
};
Any help with this will be greatly appreciated. Thank you.
Level 102
Or console.log(e.target.checked) when clicking on a checked checkbox. I cannot recall, but perhaps you have the logic reversed
Level 2
@Sinnbeck Sorry been off the office for a while. Now I tried console.log(data.roles) and this is what I get: [1, 2] which is the array of checked checkboxes. Now, when I try to uncheck, the array stays the same and the checkboxes don't uncheck. When I check the unchecked checkbox, I get [1, 2, '3'] but the checkbox remains unchecked. The more I check it, I get [1, 2, '3', '3'] and it still remains unchecked. The console.log(e.target.checked) gives me the result undefined.
Level 102
Try this logic
const handleChecked = (e) => {
let id = e.target.value;
if(! data.roles.includes(id)) {
setData("roles", [...data.roles, id]);
} else {
setData(
"roles",
data.roles.filter((item) => {
return item !== id;
})
);
}
};
Level 2
@Sinnbeck In my console.log(data.roles) I now no longer get a new checked value in the array. The values remain [1, 2] and the checkboxes still don't change too.
Level 102
@Emokores oh I messed up and flipped them. Updated with a !
Level 2
@Sinnbeck It still doesn't work. In my console.log(data.roles) I now no longer get a new checked value in the array. The values remain [1, 2] and the checkboxes still don't change too.
Level 102
@Emokores are you able to share the whole edit.jsx file (or at least everything related to roles/checkboxes). I cannot recreate the issue
Level 102
Ah just noticed. It's a type issue.
const handleChecked = (e) => {
let id = parseInt(e.target.value); //fix
if(! data.roles.includes(id)) {
setData("roles", [...data.roles, id]);
} else {
setData(
"roles",
data.roles.filter((item) => {
return item !== id;
})
);
}
};
1 like
Level 2
@Sinnbeck I'll share it ehen I sit in front of the computer in a few minutes
Level 102
@Emokores try the above first. I'm pretty sure that will fix it
Level 2
@Sinnbeck That actually fixed it. Thanks a lot! This was a tricky one.
Level 102
@Emokores I just realized that input values are always cast as strings. You console.log actually showed this as 3 was a string, while 1 and 2 were integers. [1, 2, '3']
1 like
Level 2
Level 102
@Emokores yeah it can feel a bit strict, but once you get used to it, it's awesome. It always does what is expected if you handle types correct, so if it does not work it is almost always user error.
1 like
Level 2
@Sinnbeck I can testify to that now. Thanks again. You've been of much help.
Level 2
@Sinnbeck I found another way. I could just stick with the old handleChecked() method, but add the parseInt() to the id variable:
const handleChecked = (e) => {
//* use `parseInt()` to convert string to integer:
let id = parseInt(e.target.value);
e.target.checked
? setData("roles", [...data.roles, id])
: setData(
"roles",
data.roles.filter((item) => {
return item !== id;
})
);
};
And it works perfectly.
1 like
Please or to participate in this conversation.