DEV Community

Satel
Satel

Posted on • Updated on

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, ;)

Top comments (0)