Build README

data/snippet_data.json

@@ -188,6 +188,22 @@
       "<!-expertise: 1 -->"
     ]
   },
+  {
+    "name": "MultiselectCheckbox.md",
+    "title": "MultiselectCheckbox",
+    "text": "Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.\n\nUse `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.\nCreate 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.\nRender a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.\nEach `<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.\n\n",
+    "codeBlocks": [
+      "```jsx\nconst style = {\n  listContainer: {\n    listStyle: 'none',\n    paddingLeft: 0\n  },\n  itemStyle: {\n    cursor: 'pointer',\n    padding: 5\n  }\n};\n\nfunction MultiselectCheckbox ({ options, onChange }) {\n  const [data, setData] = React.useState(options);\n\n  const toggle = (item) => {\n    data.map((_, key) => {\n      if (data[key].label === item.label) \n        data[key].checked = !item.checked;\n    });\n    setData([...data]);\n    onChange(data);\n  }\n\n  return (\n    <ul style={style.listContainer}>\n      {data.map(item => {\n        return (\n          <li\n            key={item.label}\n            style={style.itemStyle}\n            onClick={() => toggle(item)}\n          >\n            <input readOnly type='checkbox' checked={item.checked || false} />\n            {item.label}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n```",
+      "```jsx\nconst options = [{ label: \"Item One\" }, { label: \"Item Two\" }];\n\nReactDOM.render(\n  <MultiselectCheckbox\n    options={options}\n    onChange={data => {\n      console.log(data);\n    }}\n  />,\n  document.getElementById(\"root\")\n);\n```"
+    ],
+    "expertise": 1,
+    "tags": [
+      "input",
+      "state",
+      "array"
+    ],
+    "notes": []
+  },
   {
     "name": "PasswordRevealer.md",
     "title": "PasswordRevealer",