69 lines
1.7 KiB
Markdown
69 lines
1.7 KiB
Markdown
### Multiple Checkbox
|
|
|
|
##
|
|
|
|
Renders a checkbox list with the `options` provided through `props`.
|
|
|
|
Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list.
|
|
|
|
An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list.
|
|
|
|
```jsx
|
|
import React, { useState } from 'react'
|
|
|
|
const style = {
|
|
listContainer: {
|
|
listStyle: 'none',
|
|
paddingLeft: 0,
|
|
},
|
|
itemStyle: {
|
|
cursor: 'pointer',
|
|
padding: 5,
|
|
}
|
|
}
|
|
|
|
const MultiCheckbox = ({ options, onChange }) => {
|
|
const [data, updateOptions] = useState(options);
|
|
|
|
function toggle(item) {
|
|
data.map((_, key) => {
|
|
if (data[key].label === item.label) {
|
|
data[key].checked = !item.checked;
|
|
}
|
|
});
|
|
updateOptions(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>
|
|
)
|
|
}
|
|
|
|
export default MultiCheckbox;
|
|
```
|
|
|
|
```jsx
|
|
const options = [{ label: "Item One" }, { label: "Item Two" }];
|
|
|
|
ReactDOM.render(
|
|
<MultiCheckbox
|
|
options={options}
|
|
onChange={data => {
|
|
console.log(data);
|
|
}}
|
|
/>,
|
|
document.getElementById("root")
|
|
);
|
|
```
|
|
|
|
#### Notes:
|
|
* The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone.
|
|
|
|
expertise: 0 |