Merge pull request #37 from rishichawda/multiselect-checkbox

add multi select checkbox list

snippets/MultiselectCheckbox.md

@@ -0,0 +1,69 @@
+### MultiselectCheckbox
+
+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` callbac passed via the component's props.
+Render a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.
+Each `<input>` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `<li>` element's `onClick` handler.
+
+```jsx
+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>
+  );
+}
+```
+
+```jsx
+const options = [{ label: "Item One" }, { label: "Item Two" }];
+
+ReactDOM.render(
+  <MultiselectCheckbox
+    options={options}
+    onChange={data => {
+      console.log(data);
+    }}
+  />,
+  document.getElementById("root")
+);
+```
+
+<!-- tags: input,state,array -->
+
+<!-- expertise: 1 -->