Multi Checkbox Binding in...
Handling multi checkbox binding is not React's finest job... React needs so much more code than Vue or Svelte. I based this comparison with Vue example and I tried to keep the same "basis". See how simple it is in Vue or Svelte?
Check it out 🚀
React
const [checkedJobs, setCheckedJobs] = useState<string[]>(['Frontend']);
const handleMultiCheckbox = ({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
let checked = [...checkedJobs];
let findIndex = checked.findIndex(
(item: string): boolean => item === value
);
if (!checkedJobs.includes(value)) {
checked = [...checkedJobs, value];
} else {
checked = checkedJobs.filter(
(item: string, index: number) => index !== findIndex
);
}
setCheckedJobs(checked);
};
<section>
<h2>Multi Checkbox</h2>
<input
type="checkbox"
id="frontend"
value="Frontend"
onChange={handleMultiCheckbox}
/>
<label htmlFor="frontend">Frontend Developer</label>
<input
type="checkbox"
id="backend"
value="Backend"
onChange={handleMultiCheckbox}
/>
<label htmlFor="backend">Backend Developer</label>
<input
type="checkbox"
id="fullstack"
value="Fullstack"
onChange={handleMultiCheckbox}
/>
<label htmlFor="fullstack">Fullstack Developer</label>
<p>Checked jobs: {checkedJobs.map((item: string) => item).join(', ')}</p>
</section>
Vue
const checkedJobs = ref(['Frontend']);
<section>
<h2>Multi Checkbox</h2>
<input
type="checkbox"
id="frontend"
value="Frontend"
v-model="checkedJobs"
/>
<label for="frontend">Frontend Developer</label>
<input
type="checkbox"
id="backend"
value="Backend"
v-model="checkedJobs"
/>
<label for="backend">Backend Developer</label>
<input
type="checkbox"
id="fullstack"
value="Fullstack"
v-model="checkedJobs"
/>
<label for="fullstack">Fullstack Developer</label>
<p>Checked jobs: {{ checkedJobs }}</p>
</section>
Svelte
let checkedJobs: string[] = ['Frontend Developer'];
<section>
<h2>Multi Checkbox</h2>
<input
type="checkbox"
id="frontend"
value="Frontend"
bind:group={checkedJobs}
/>
<label for="frontend">Frontend Developer</label>
<input
type="checkbox"
id="backend"
value="Backend"
bind:group={checkedJobs}
/>
<label for="backend">Backend Developer</label>
<input
type="checkbox"
id="fullstack"
value="Fullstack"
bind:group={checkedJobs}
/>
<label for="fullstack">Fullstack Developer</label>
<p>Checked jobs: {checkedJobs}</p>
</section>
Top comments (0)