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