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)