Update snippets

Resolves #112

snippets/MultiselectCheckbox.md

@@ -5,45 +5,38 @@ tags: components,input,state,array,intermediate
 
 Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
 
-- Use `React.useState()` 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 `<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.
+- Use the `useState()` hook to create the `data` state variable and use the `options` prop to initialize its value.
+- Create a `toggle` function that uses the spread operator (`...`) and `Array.prototype.splice()` to update the `data` state variable and call the `onChange` callback with any `checked` options.
+- Use `Array.prototype.map()` to map the `data` state variable to individual `<input type="checkbox">` elements, each one wrapped in a `<label>`, binding the `onClick` handler to the `toggle` function.
 
 ```jsx
-const style = {
-  listContainer: {
-    listStyle: 'none',
-    paddingLeft: 0
-  },
-  itemStyle: {
-    cursor: 'pointer',
-    padding: 5
-  }
-};
-
 const MultiselectCheckbox = ({ options, onChange }) => {
   const [data, setData] = React.useState(options);
 
-  const toggle = item => {
-    data.forEach((_, key) => {
-      if (data[key].label === item.label) data[key].checked = !item.checked;
+  const toggle = index => {
+    const newData = [...data];
+    newData.splice(index, 1, {
+      label: data[index].label,
+      checked: !data[index].checked
     });
-    setData([...data]);
-    onChange(data);
+    setData(newData);
+    onChange(newData.filter(x => x.checked));
   };
 
   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>
+    <>
+      {data.map((item, index) => (
+        <label key={item.label}>
+          <input
+            readOnly
+            type="checkbox"
+            checked={item.checked || false}
+            onClick={() => toggle(index)}
+          />
+          {item.label}
+        </label>
+      ))}
+    </>
   );
 };
 ```