Create Multi Select Checkbox at ease :D

Here, I would like to share code snippet to create your own Multi Select Checkbox with React basics.

It renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.

• Use React.setState() to create a data state variable and set its initial value equal to the options prop.
• Create a function toggle that is used to toggle the checked to update the data state variable and call the onChange callback passed via the component's props.
• Render a
  element and use Array.prototype.map() to map the data state variable to individual
  • elements with elements as their children.
  • Each element has the type='checkbox' attribute and is marked as readOnly, as its click events are handled by the parent
  • element's onClick handler.

  const style = {
    listContainer: {
      listStyle: 'none',
      paddingLeft: 0
    },
    itemStyle: {
      cursor: 'pointer',
      padding: 5
    }
  };
  
  function MultiselectCheckbox({ options, onChange }) {
    const [data, setData] = React.useState(options);
  
    const toggle = item => {
      data.map((_, key) => {
        if (data[key].label === item.label) data[key].checked = !item.checked;
      });
      setData([...data]);
      onChange(data);
    };
  
    return (
      <ul style={style.listContainer}>
        {data.map(item => {
          return (
            <li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>
              <input readOnly type="checkbox" checked={item.checked || false} />
              {item.label}
            </li>
          );
        })}
      </ul>
    );
  }
  

  Usage

  const options = [{ label: 'Item One' }, { label: 'Item Two' }];
  
  ReactDOM.render(
    <MultiselectCheckbox
      options={options}
      onChange={data => {
        console.log(data);
      }}
    />,
    document.getElementById('root')
  );
  

  Hope this helps you, ;)