website

source code for the ttmaths.uk website
Log | Files | Refs | README

MultipleSelection.jsx (900B)

      1 
      2 export default function MultipleSelection({ variable, setVariable, id, legend, values, labels = values }) {
      3   const checked = values.map(value => variable.includes(value));
      4 
      5   function updateVariable(e, index) {
      6     const newChecked = checked.map((value, i) => i === index ? e.target.checked : value);
      7     const validChecked = newChecked.some(Boolean) ? newChecked : checked.map((value) => !value);
      8     setVariable(values.filter((_, i) => validChecked[i]));
      9   }
     10 
     11   return (
     12     <fieldset key={id}>
     13       <legend>{legend}</legend>
     14       {values.map((value, i) => {
     15         const name = `${id}:${value}`;
     16         return (
     17           <div key={value} class="field-row">
     18             <input type="checkbox" id={name} name={name} checked={checked[i]} onChange={e => updateVariable(e, i)} />
     19             <label htmlFor={name}>{labels[i]}</label>
     20           </div>
     21         );
     22       })}
     23     </fieldset>
     24   );
     25 }