React, Vue and Svelte : Comparing Multi Checkbox Binding

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

Live Example

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

Live Example

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

Live Example

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>