From 2a28e1dff18acc8641f6689aef37fa086138aada Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 6 Mar 2019 20:46:04 +0200
Subject: [PATCH] Resolve #53

---
 README.md                       | 185 ++++++++++++++++----------------
 data/snippet_data.json          |  48 ++++-----
 snippet-template.md             |   4 +-
 snippets/Accordion.md           |  10 +-
 snippets/AutoLink.md            |   4 +-
 snippets/Carousel.md            |  10 +-
 snippets/Collapse.md            |  10 +-
 snippets/CountDown.md           |  16 +--
 snippets/DataList.md            |   6 +-
 snippets/DataTable.md           |   4 +-
 snippets/FileDrop.md            |  15 ++-
 snippets/Input.md               |   4 +-
 snippets/LimitedTextarea.md     |   6 +-
 snippets/LimitedWordTextarea.md |  10 +-
 snippets/Mailto.md              |   4 +-
 snippets/MappedTable.md         |   8 +-
 snippets/MultiselectCheckbox.md |   8 +-
 snippets/PasswordRevealer.md    |   4 +-
 snippets/Select.md              |   6 +-
 snippets/Slider.md              |   4 +-
 snippets/StarRating.md          |  10 +-
 snippets/Tabs.md                |  10 +-
 snippets/TextArea.md            |   4 +-
 snippets/Ticker.md              |   7 +-
 snippets/Toggle.md              |   6 +-
 snippets/Tooltip.md             |   6 +-
 snippets/TreeView.md            |  14 +--
 27 files changed, 212 insertions(+), 211 deletions(-)

diff --git a/README.md b/README.md
index 2a2faaf92..1813d1863 100644
--- a/README.md
+++ b/README.md
@@ -112,9 +112,9 @@ import ReactDOM from 'react-dom';
 
 Renders a list of elements from an array of primitives.
 
-Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
-Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.
-Omit the `isOrdered` prop to render a `<ul>` list by default.
+* Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
+* Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.
+* Omit the `isOrdered` prop to render a `<ul>` list by default.
 
 ```jsx
 function DataList({ isOrdered, data }) {
@@ -139,8 +139,8 @@ ReactDOM.render(<DataList data={names} isOrdered />, document.getElementById('ro
 
 Renders a table with rows dynamically created from an array of primitives.
 
-Render a `<table>` element with two columns (`ID` and `Value`).
-Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
+* Render a `<table>` element with two columns (`ID` and `Value`).
+* Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
 
 ```jsx
 function DataTable({ data }) {
@@ -180,10 +180,10 @@ ReactDOM.render(<DataTable data={people} />, document.getElementById('root'));
 
 Renders a table with rows dynamically created from an array of objects and a list of property names.
 
-Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
-Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
-Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.
-Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
+* Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
+* Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
+* Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.
+* Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
 
 ```jsx
 function MappedTable({ data, propertyNames }) {
@@ -242,8 +242,8 @@ ReactDOM.render(
 
 Renders an `<input>` element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<input>` element.
-Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+* Use object destructuring to set defaults for certain attributes of the `<input>` element.
+* Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
 
 ```jsx
 function Input({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
@@ -276,10 +276,10 @@ ReactDOM.render(
 
 Renders a textarea component with a character limit.
 
-Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
+* Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
 Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.
-Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
-Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
+* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
+* Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 
 ```jsx
 function LimitedTextarea({ rows, cols, value, limit }) {
@@ -323,11 +323,11 @@ ReactDOM.render(<LimitedTextarea limit={32} value="Hello!" />, document.getEleme
 
 Renders a textarea component with a word limit.
 
-Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.
-Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.
-If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.
-Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
-Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
+* Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.
+* Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.
+* If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.
+* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
+* Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 
 ```jsx
 function LimitedWordTextarea({ rows, cols, value, limit }) {
@@ -387,10 +387,10 @@ ReactDOM.render(
 
 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.
+* 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 = {
@@ -454,8 +454,8 @@ ReactDOM.render(
 
 Renders a password input field with a reveal button.
 
-Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.
-Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
+* Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.
+* Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
 
 ```jsx
 function PasswordRevealer({ value }) {
@@ -484,9 +484,9 @@ ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));
 
 Renders a `<select>` element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<select>` element.
-Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
-Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
+* Use object destructuring to set defaults for certain attributes of the `<select>` element.
+* Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+* Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
 
 ```jsx
 function Select({ values, callback, disabled = false, readonly = false, selected }) {
@@ -529,8 +529,8 @@ ReactDOM.render(
 
 Renders a slider element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<input>` element.
-Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+* Use object destructuring to set defaults for certain attributes of the `<input>` element.
+* Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
 
 ```jsx
 function Slider({ callback, disabled = false, readOnly = false }) {
@@ -559,8 +559,8 @@ ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getEleme
 
 Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
-Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+* Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
+* Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
 
 ```jsx
 function TextArea({
@@ -603,13 +603,13 @@ ReactDOM.render(
 
 Renders a tree view of a JSON object or array with collapsible content.
 
-Use object destructuring to set defaults for certain props.
-Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
-Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
-Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
-Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.
-For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
-Otherwise, render a `<p>` element with the appropriate style.
+* Use object destructuring to set defaults for certain props.
+* Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
+* Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
+* Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
+* Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.
+* For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
+* Otherwise, render a `<p>` element with the appropriate style.
 
 ```css
 .tree-element {
@@ -735,8 +735,8 @@ ReactDOM.render(<TreeView data={data} name="data" />, document.getElementById('r
 
 Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
 
-Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
-Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
+* Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
+* Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
 
 ```jsx
 function AutoLink({ text }) {
@@ -776,11 +776,11 @@ ReactDOM.render(
 
 Renders an accordion menu with multiple collapsible content components.
 
-Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.
-Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.
-In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
-Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.
-Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
+* Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.
+* Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.
+* In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
+* Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.
+* Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
 `changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.
 
 ```jsx
@@ -862,11 +862,11 @@ ReactDOM.render(
 
 Renders a carousel component.
 
-Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
-Use an object, `style`, to hold the styles for the individual components.
-Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
-Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
-Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
+* Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
+* Use an object, `style`, to hold the styles for the individual components.
+* Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
+* Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
+* Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
 
 ```jsx
 function Carousel(props) {
@@ -931,11 +931,11 @@ ReactDOM.render(
 
 Renders a component with collapsible content.
 
-Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
-Use an object, `style`, to hold the styles for individual components and their states.
-Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.
-Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
-Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
+* Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
+* Use an object, `style`, to hold the styles for individual components and their states.
+* Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.
+* Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
+* Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
 
 ```jsx
 function Collapse(props) {
@@ -991,14 +991,14 @@ ReactDOM.render(
 
 Renders a countdown timer that prints a message when it reaches zero.
 
-Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.
-Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.
-Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).
-If `paused` or `over` is `true`, `tick` will return immediately.
-Create a method `reset`, that resets all state variables to their initial states.
-Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.
-Use a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.
-If `over` is `true`, the timer will display a message instead of the value of `time`.
+* Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.
+* Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.
+* Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).
+* If `paused` or `over` is `true`, `tick` will return immediately.
+* Create a method `reset`, that resets all state variables to their initial states.
+* Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.
+* Use a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.
+* If `over` is `true`, the timer will display a message instead of the value of `time`.
 
 ```jsx
 function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
@@ -1075,15 +1075,14 @@ ReactDOM.render(<CountDown hours="1" minutes="45" />, document.getElementById('r
 
 Renders a file drag and drop component for a single file.
 
-Create a ref called `dropRef` for this component.
-Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
+* Create a ref called `dropRef` for this component.
+* Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
 The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.
-
-Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.
-Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.
-`handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.
-Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.
-Finally, bind the `ref` of the created `<div>` to `dropRef`.
+* Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.
+* Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.
+* `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.
+* Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.
+* Finally, bind the `ref` of the created `<div>` to `dropRef`.
 
 ```css
 .filedrop {
@@ -1181,8 +1180,8 @@ ReactDOM.render(<FileDrop handleDrop={console.log} />, document.getElementById('
 
 Renders a link formatted to send an email.
 
-Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
-Render the link with `props.children` as its content.
+* Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
+* Render the link with `props.children` as its content.
 
 ```jsx
 function Mailto({ email, subject, body, ...props }) {
@@ -1211,11 +1210,11 @@ ReactDOM.render(
 
 Renders a star rating component.
 
-Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
-In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
-Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
-Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
-Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
+* Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
+* In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
+* Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
+* Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
+* Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
 
 ```jsx
 function Star({ marked, starId }) {
@@ -1268,11 +1267,11 @@ ReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));
 
 Renders a tabbed menu and view component.
 
-Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.
-Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
-Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.
-Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
-`changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
+* Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.
+* Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
+* Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.
+* Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
+* `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
 
 ```css
 .tab-menu > button {
@@ -1351,9 +1350,9 @@ ReactDOM.render(
 
 Renders a ticker component.
 
-Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.
-Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.
-Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.
+* Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.
+* Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.
+* Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.
 
 ```jsx
 function Ticker(props) {
@@ -1397,9 +1396,9 @@ ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('r
 
 Renders a toggle component.
 
-Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.
-Use an object, `style`, to hold the styles for individual components and their states.
-Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
+* Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.
+* Use an object, `style`, to hold the styles for individual components and their states.
+* Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
 
 ```jsx
 function Toggle(props) {
@@ -1435,9 +1434,9 @@ ReactDOM.render(<Toggle />, document.getElementById('root'));
 
 Renders a tooltip component.
 
-Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
-Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
-Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
+* Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
+* Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
+* Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
 
 ```css
 .tooltip {
diff --git a/data/snippet_data.json b/data/snippet_data.json
index 59a1a7522..db2d17c28 100644
--- a/data/snippet_data.json
+++ b/data/snippet_data.json
@@ -2,7 +2,7 @@
   {
     "name": "Accordion.md",
     "title": "Accordion",
-    "text": "Renders an accordion menu with multiple collapsible content components.\n\nDefine an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.\nEach `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.\nIn the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\nUse `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.\nDefine `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.\n`changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.\n\n",
+    "text": "Renders an accordion menu with multiple collapsible content components.\n\n* Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.\n* Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.\n* In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\n* Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.\n* Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.\n`changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.\n\n",
     "codeBlocks": [
       "```jsx\nfunction AccordionItem(props) {\n  const style = {\n    collapsed: {\n      display: 'none'\n    },\n    expanded: {\n      display: 'block'\n    },\n    buttonStyle: {\n      display: 'block',\n      width: '100%'\n    }\n  };\n\n  return (\n    <div>\n      <button style={style.buttonStyle} onClick={() => props.handleClick()}>\n        {props.label}\n      </button>\n      <div\n        className=\"collapse-content\"\n        style={props.isCollapsed ? style.collapsed : style.expanded}\n        aria-expanded={props.isCollapsed}\n      >\n        {props.children}\n      </div>\n    </div>\n  );\n}\n\nfunction Accordion(props) {\n  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\n\n  const changeItem = itemIndex => {\n    if (typeof props.onItemClick === 'function') props.onItemClick(itemIndex);\n    if (itemIndex !== bindIndex) setBindIndex(itemIndex);\n  };\n  const items = props.children.filter(item => item.type.name === 'AccordionItem');\n\n  return (\n    <div className=\"wrapper\">\n      {items.map(({ props }) => (\n        <AccordionItem\n          isCollapsed={bindIndex === props.index}\n          label={props.label}\n          handleClick={() => changeItem(props.index)}\n          children={props.children}\n        />\n      ))}\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Accordion defaultIndex=\"1\" onItemClick={console.log}>\n    <AccordionItem label=\"A\" index=\"1\">\n      Lorem ipsum\n    </AccordionItem>\n    <AccordionItem label=\"B\" index=\"2\">\n      Dolor sit amet\n    </AccordionItem>\n  </Accordion>,\n  document.getElementById('root')\n);\n```"
@@ -18,7 +18,7 @@
   {
     "name": "AutoLink.md",
     "title": "AutoLink",
-    "text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\nUse `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\nReturn a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n",
+    "text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n* Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n* Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n",
     "codeBlocks": [
       "```jsx\nfunction AutoLink({ text }) {\n  const delimiter = /((?:https?:\\/\\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\\-]{1,61}[a-z0-9])?\\.[^\\.|\\s])+[a-z\\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\\d{1,5})*[a-z0-9.,_\\/~#&=;%+?\\-\\\\(\\\\)]*)/gi;\n\n  return (\n    <React.Fragment>\n      {text.split(delimiter).map(word => {\n        let match = word.match(delimiter);\n        if (match) {\n          let url = match[0];\n          return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;\n        }\n        return word;\n      })}\n    </React.Fragment>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <AutoLink text=\"foo bar baz http://example.org bar\" />,\n  document.getElementById('root')\n);\n```"
@@ -34,7 +34,7 @@
   {
     "name": "Carousel.md",
     "title": "Carousel",
-    "text": "Renders a carousel component.\n\nUse the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\nUse an object, `style`, to hold the styles for the individual components.\nUse the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\nDestructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\nRender the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
+    "text": "Renders a carousel component.\n\n* Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\n* Use an object, `style`, to hold the styles for the individual components.\n* Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\n* Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\n* Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Carousel(props) {\n  const [active, setActive] = React.useState(0);\n  let scrollInterval = null;\n  const style = {\n    carousel: {\n      position: 'relative'\n    },\n    carouselItem: {\n      position: 'absolute',\n      visibility: 'hidden'\n    },\n    visible: {\n      visibility: 'visible'\n    }\n  };\n  React.useEffect(() => {\n    scrollInterval = setTimeout(() => {\n      const { carouselItems } = props;\n      setActive((active + 1) % carouselItems.length);\n    }, 2000);\n  });\n  const { carouselItems, ...rest } = props;\n  return (\n    <div style={style.carousel}>\n      {carouselItems.map((item, index) => {\n        const activeStyle = active === index ? style.visible : {};\n        return React.cloneElement(item, {\n          ...rest,\n          style: {\n            ...style.carouselItem,\n            ...activeStyle\n          }\n        });\n      })}\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Carousel\n    carouselItems={[\n      <div>carousel item 1</div>,\n      <div>carousel item 2</div>,\n      <div>carousel item 3</div>\n    ]}\n  />,\n  document.getElementById('root')\n);\n```"
@@ -51,7 +51,7 @@
   {
     "name": "Collapse.md",
     "title": "Collapse",
-    "text": "Renders a component with collapsible content.\n\nUse the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\nUse an object, `style`, to hold the styles for individual components and their states.\nUse a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.\nDetermine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.\nFinally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.\n\n",
+    "text": "Renders a component with collapsible content.\n\n* Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\n* Use an object, `style`, to hold the styles for individual components and their states.\n* Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.\n* Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.\n* Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Collapse(props) {\n  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);\n\n  const style = {\n    collapsed: {\n      display: 'none'\n    },\n    expanded: {\n      display: 'block'\n    },\n    buttonStyle: {\n      display: 'block',\n      width: '100%'\n    }\n  };\n\n  return (\n    <div>\n      <button style={style.buttonStyle} onClick={() => setIsCollapsed(!isCollapsed)}>\n        {isCollapsed ? 'Show' : 'Hide'} content\n      </button>\n      <div\n        className=\"collapse-content\"\n        style={isCollapsed ? style.collapsed : style.expanded}\n        aria-expanded={isCollapsed}\n      >\n        {props.children}\n      </div>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Collapse>\n    <h1>This is a collapse</h1>\n    <p>Hello world!</p>\n  </Collapse>,\n  document.getElementById('root')\n);\n```"
@@ -67,7 +67,7 @@
   {
     "name": "CountDown.md",
     "title": "CountDown",
-    "text": "Renders a countdown timer that prints a message when it reaches zero.\n\nUse object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.\nUse the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.\nCreate a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).\nIf `paused` or `over` is `true`, `tick` will return immediately.\nCreate a method `reset`, that resets all state variables to their initial states.\nUse the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.\nUse a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.\nIf `over` is `true`, the timer will display a message instead of the value of `time`.\n\n",
+    "text": "Renders a countdown timer that prints a message when it reaches zero.\n\n* Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.\n* Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.\n* Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).\n* If `paused` or `over` is `true`, `tick` will return immediately.\n* Create a method `reset`, that resets all state variables to their initial states.\n* Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.\n* Use a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.\n* If `over` is `true`, the timer will display a message instead of the value of `time`.\n\n",
     "codeBlocks": [
       "```jsx\nfunction CountDown({ hours = 0, minutes = 0, seconds = 0 }) {\n  const [paused, setPaused] = React.useState(false);\n  const [over, setOver] = React.useState(false);\n  const [time, setTime] = React.useState({\n    hours: parseInt(hours),\n    minutes: parseInt(minutes),\n    seconds: parseInt(seconds)\n  });\n\n  const tick = () => {\n    if (paused || over) return;\n    if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true);\n    else if (time.minutes == 0 && time.seconds == 0)\n      setTime({\n        hours: time.hours - 1,\n        minutes: 59,\n        seconds: 59\n      });\n    else if (time.seconds == 0)\n      setTime({\n        hours: time.hours,\n        minutes: time.minutes - 1,\n        seconds: 59\n      });\n    else\n      setTime({\n        hours: time.hours,\n        minutes: time.minutes,\n        seconds: time.seconds - 1\n      });\n  };\n\n  const reset = () => {\n    setTime({\n      hours: parseInt(hours),\n      minutes: parseInt(minutes),\n      seconds: parseInt(seconds)\n    });\n    setPaused(false);\n    setOver(false);\n  };\n\n  React.useEffect(() => {\n    let timerID = setInterval(() => tick(), 1000);\n    return () => clearInterval(timerID);\n  });\n\n  return (\n    <div>\n      <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes\n        .toString()\n        .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>\n      <div>{over ? \"Time's up!\" : ''}</div>\n      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>\n      <button onClick={() => reset()}>Restart</button>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<CountDown hours=\"1\" minutes=\"45\" />, document.getElementById('root'));\n```"
@@ -82,7 +82,7 @@
   {
     "name": "DataList.md",
     "title": "DataList",
-    "text": "Renders a list of elements from an array of primitives.\n\nUse the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.\nUse `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.\nOmit the `isOrdered` prop to render a `<ul>` list by default.\n\n",
+    "text": "Renders a list of elements from an array of primitives.\n\n* Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.\n* Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.\n* Omit the `isOrdered` prop to render a `<ul>` list by default.\n\n",
     "codeBlocks": [
       "```jsx\nfunction DataList({ isOrdered, data }) {\n  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);\n  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;\n}\n```",
       "```jsx\nconst names = ['John', 'Paul', 'Mary'];\nReactDOM.render(<DataList data={names} />, document.getElementById('root'));\nReactDOM.render(<DataList data={names} isOrdered />, document.getElementById('root'));\n```"
@@ -96,7 +96,7 @@
   {
     "name": "DataTable.md",
     "title": "DataTable",
-    "text": "Renders a table with rows dynamically created from an array of primitives.\n\nRender a `<table>` element with two columns (`ID` and `Value`).\nUse `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.\n\n",
+    "text": "Renders a table with rows dynamically created from an array of primitives.\n\n* Render a `<table>` element with two columns (`ID` and `Value`).\n* Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.\n\n",
     "codeBlocks": [
       "```jsx\nfunction DataTable({ data }) {\n  return (\n    <table>\n      <thead>\n        <tr>\n          <th>ID</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        {data.map((val, i) => (\n          <tr key={`${i}_${val}`}>\n            <td>{i}</td>\n            <td>{val}</td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n```",
       "```jsx\nconst people = ['John', 'Jesse'];\nReactDOM.render(<DataTable data={people} />, document.getElementById('root'));\n```"
@@ -110,7 +110,7 @@
   {
     "name": "FileDrop.md",
     "title": "FileDrop",
-    "text": "Renders a file drag and drop component for a single file.\n\nCreate a ref called `dropRef` for this component.\nUse the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.\nThe variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.\n\nCreate the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.\nEach of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.\n`handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.\nReturn an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.\nFinally, bind the `ref` of the created `<div>` to `dropRef`.\n\n",
+    "text": "Renders a file drag and drop component for a single file.\n\n* Create a ref called `dropRef` for this component.\n* Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.\nThe variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.\n* Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.\n* Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.\n* `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.\n* Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.\n* Finally, bind the `ref` of the created `<div>` to `dropRef`.\n\n",
     "codeBlocks": [
       "```css\n.filedrop {\n  min-height: 120px;\n  border: 3px solid #d3d3d3;\n  text-align: center;\n  font-size: 24px;\n  padding: 32px;\n  border-radius: 4px;\n}\n\n.filedrop.drag {\n  border: 3px dashed #1e90ff;\n}\n\n.filedrop.ready {\n  border: 3px solid #32cd32;\n}\n```",
       "```jsx\nfunction FileDrop(props) {\n  const [drag, setDrag] = React.useState(false);\n  const [filename, setFilename] = React.useState('');\n  let dropRef = React.createRef();\n  let dragCounter = 0;\n\n  const handleDrag = e => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const handleDragIn = e => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounter++;\n    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);\n  };\n\n  const handleDragOut = e => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounter--;\n    if (dragCounter === 0) setDrag(false);\n  };\n\n  const handleDrop = e => {\n    e.preventDefault();\n    e.stopPropagation();\n    setDrag(false);\n    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n      props.handleDrop(e.dataTransfer.files[0]);\n      setFilename(e.dataTransfer.files[0].name);\n      e.dataTransfer.clearData();\n      dragCounter = 0;\n    }\n  };\n\n  React.useEffect(() => {\n    let div = dropRef.current;\n    div.addEventListener('dragenter', handleDragIn);\n    div.addEventListener('dragleave', handleDragOut);\n    div.addEventListener('dragover', handleDrag);\n    div.addEventListener('drop', handleDrop);\n    return function cleanup() {\n      div.removeEventListener('dragenter', handleDragIn);\n      div.removeEventListener('dragleave', handleDragOut);\n      div.removeEventListener('dragover', handleDrag);\n      div.removeEventListener('drop', handleDrop);\n    };\n  });\n\n  return (\n    <div\n      ref={dropRef}\n      className={drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'}\n    >\n      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}\n    </div>\n  );\n}\n```",
@@ -128,7 +128,7 @@
   {
     "name": "Input.md",
     "title": "Input",
-    "text": "Renders an `<input>` element that uses a callback function to pass its value to the parent component.\n\nUse object destructuring to set defaults for certain attributes of the `<input>` element.\nRender an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
+    "text": "Renders an `<input>` element that uses a callback function to pass its value to the parent component.\n\n* Use object destructuring to set defaults for certain attributes of the `<input>` element.\n* Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Input({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {\n  return (\n    <input\n      type={type}\n      disabled={disabled}\n      readOnly={readOnly}\n      placeholder={placeholder}\n      onChange={({ target: { value } }) => callback(value)}\n    />\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Input type=\"text\" placeholder=\"Insert some text here...\" callback={val => console.log(val)} />,\n  document.getElementById('root')\n);\n```"
@@ -142,7 +142,7 @@
   {
     "name": "LimitedTextarea.md",
     "title": "LimitedTextarea",
-    "text": "Renders a textarea component with a character limit.\n\nUse the `React.useState()` hook to create the `content` state variable and set its value to `value`.\nCreate a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\nUse the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\nUse a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
+    "text": "Renders a textarea component with a character limit.\n\n* Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.\nCreate a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\n* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n* Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
     "codeBlocks": [
       "```jsx\nfunction LimitedTextarea({ rows, cols, value, limit }) {\n  const [content, setContent] = React.useState(value);\n\n  const setFormattedContent = text => {\n    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);\n  };\n\n  React.useEffect(() => {\n    setFormattedContent(content);\n  }, []);\n\n  return (\n    <div>\n      <textarea\n        rows={rows}\n        cols={cols}\n        onChange={event => setFormattedContent(event.target.value)}\n        value={content}\n      />\n      <p>\n        {content.length}/{limit}\n      </p>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<LimitedTextarea limit={32} value=\"Hello!\" />, document.getElementById('root'));\n```"
@@ -158,7 +158,7 @@
   {
     "name": "LimitedWordTextarea.md",
     "title": "LimitedWordTextarea",
-    "text": "Renders a textarea component with a word limit.\n\nUse the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.\nCreate a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.\nIf the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.\nUse the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\nUse a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
+    "text": "Renders a textarea component with a word limit.\n\n* Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.\n* Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.\n* If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.\n* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\n* Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
     "codeBlocks": [
       "```jsx\nfunction LimitedWordTextarea({ rows, cols, value, limit }) {\n  const [content, setContent] = React.useState(value);\n  const [wordCount, setWordCount] = React.useState(0);\n\n  const setFormattedContent = text => {\n    let words = text.split(' ');\n    if (words.filter(Boolean).length > limit) {\n      setContent(\n        text\n          .split(' ')\n          .slice(0, limit)\n          .join(' ')\n      );\n      setWordCount(limit);\n    } else {\n      setContent(text);\n      setWordCount(words.filter(Boolean).length);\n    }\n  };\n\n  React.useEffect(() => {\n    setFormattedContent(content);\n  }, []);\n\n  return (\n    <div>\n      <textarea\n        rows={rows}\n        cols={cols}\n        onChange={event => setFormattedContent(event.target.value)}\n        value={content}\n      />\n      <p>\n        {wordCount}/{limit}\n      </p>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <LimitedWordTextArea limit={5} value=\"Hello there!\" />,\n  document.getElementById('root')\n);\n```"
@@ -174,7 +174,7 @@
   {
     "name": "Mailto.md",
     "title": "Mailto",
-    "text": "Renders a link formatted to send an email.\n\nDestructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.\nRender the link with `props.children` as its content.\n\n",
+    "text": "Renders a link formatted to send an email.\n\n* Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.\n* Render the link with `props.children` as its content.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Mailto({ email, subject, body, ...props }) {\n  return (\n    <a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <Mailto email=\"foo@bar.baz\" subject=\"Hello\" body=\"Hello world!\">\n    Mail me!\n  </Mailto>,\n  document.getElementById('root')\n);\n```"
@@ -188,7 +188,7 @@
   {
     "name": "MappedTable.md",
     "title": "MappedTable",
-    "text": "Renders a table with rows dynamically created from an array of objects and a list of property names.\n\nUse `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.\nRender a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.\nUse `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.\nUse `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.\n\n",
+    "text": "Renders a table with rows dynamically created from an array of objects and a list of property names.\n\n* Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.\n* Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.\n* Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.\n* Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.\n\n",
     "codeBlocks": [
       "```jsx\nfunction MappedTable({ data, propertyNames }) {\n  let filteredData = data.map(v =>\n    Object.keys(v)\n      .filter(k => propertyNames.includes(k))\n      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})\n  );\n  return (\n    <table>\n      <thead>\n        <tr>\n          {propertyNames.map(val => (\n            <th key={`h_${val}`}>{val}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {filteredData.map((val, i) => (\n          <tr key={`i_${i}`}>\n            {propertyNames.map(p => (\n              <td key={`i_${i}_${p}`}>{val[p]}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n```",
       "```jsx\nconst people = [\n  { name: 'John', surname: 'Smith', age: 42 },\n  { name: 'Adam', surname: 'Smith', gender: 'male' }\n];\nconst propertyNames = ['name', 'surname', 'age'];\nReactDOM.render(\n  <MappedTable data={people} propertyNames={propertyNames} />,\n  document.getElementById('root')\n);\n```"
@@ -207,7 +207,7 @@
   {
     "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",
+    "text": "Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.\n\n* Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.\n* 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.\n* 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.\n* 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.\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) 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 key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>\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```"
@@ -223,7 +223,7 @@
   {
     "name": "PasswordRevealer.md",
     "title": "PasswordRevealer",
-    "text": "Renders a password input field with a reveal button.\n\nUse the `React.useState()` hook to create the `shown` state variable and set its value to `false`.\nUse a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `\"text\"` and `\"password\"`.\n\n",
+    "text": "Renders a password input field with a reveal button.\n\n* Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.\n* Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `\"text\"` and `\"password\"`.\n\n",
     "codeBlocks": [
       "```jsx\nfunction PasswordRevealer({ value }) {\n  const [shown, setShown] = React.useState(false);\n\n  return (\n    <div>\n      <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />\n      <button onClick={() => setShown(!shown)}>Show/Hide</button>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<PasswordRevealer />, document.getElementById('root'));\n```"
@@ -238,7 +238,7 @@
   {
     "name": "Select.md",
     "title": "Select",
-    "text": "Renders a `<select>` element that uses a callback function to pass its value to the parent component.\n\nUse object destructuring to set defaults for certain attributes of the `<select>` element.\nRender a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\nUse destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.\n\n",
+    "text": "Renders a `<select>` element that uses a callback function to pass its value to the parent component.\n\n* Use object destructuring to set defaults for certain attributes of the `<select>` element.\n* Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n* Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Select({ values, callback, disabled = false, readonly = false, selected }) {\n  return (\n    <select\n      disabled={disabled}\n      readOnly={readonly}\n      onChange={({ target: { value } }) => callback(value)}\n    >\n      {values.map(([value, text]) => (\n        <option selected={selected === value} value={value}>\n          {text}\n        </option>\n      ))}\n    </select>\n  );\n}\n```",
       "```jsx\nlet choices = [\n  ['grapefruit', 'Grapefruit'],\n  ['lime', 'Lime'],\n  ['coconut', 'Coconut'],\n  ['mango', 'Mango']\n];\nReactDOM.render(\n  <Select values={choices} selected=\"lime\" callback={val => console.log(val)} />,\n  document.getElementById('root')\n);\n```"
@@ -252,7 +252,7 @@
   {
     "name": "Slider.md",
     "title": "Slider",
-    "text": "Renders a slider element that uses a callback function to pass its value to the parent component.\n\nUse object destructuring to set defaults for certain attributes of the `<input>` element.\nRender an `<input>` element of type `\"range\"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
+    "text": "Renders a slider element that uses a callback function to pass its value to the parent component.\n\n* Use object destructuring to set defaults for certain attributes of the `<input>` element.\n* Render an `<input>` element of type `\"range\"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Slider({ callback, disabled = false, readOnly = false }) {\n  return (\n    <input\n      type=\"range\"\n      disabled={disabled}\n      readOnly={readOnly}\n      onChange={({ target: { value } }) => callback(value)}\n    />\n  );\n}\n```",
       "```jsx\nReactDOM.render(<Slider callback={val => console.log(val)} />, document.getElementById('root'));\n```"
@@ -266,7 +266,7 @@
   {
     "name": "StarRating.md",
     "title": "StarRating",
-    "text": "Renders a star rating component.\n\nDefine a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.\nIn the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.\nCreate a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.\nCreate a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.\nFinally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).\n\n",
+    "text": "Renders a star rating component.\n\n* Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.\n* In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.\n* Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.\n* Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.\n* Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).\n\n",
     "codeBlocks": [
       "```jsx\nfunction Star({ marked, starId }) {\n  return (\n    <span star-id={starId} style={{ color: '#ff9933' }} role=\"button\">\n      {marked ? '\\u2605' : '\\u2606'}\n    </span>\n  );\n}\n\nfunction StarRating(props) {\n  const [rating, setRating] = React.useState(typeof props.rating == 'number' ? props.rating : 0);\n  const [selection, setSelection] = React.useState(0);\n  const hoverOver = event => {\n    let val = 0;\n    if (event && event.target && event.target.getAttribute('star-id'))\n      val = event.target.getAttribute('star-id');\n    setSelection(val);\n  };\n  return (\n    <div\n      onMouseOut={() => hoverOver(null)}\n      onClick={() => setRating(event.target.getAttribute('star-id') || this.state.rating)}\n      onMouseOver={hoverOver}\n    >\n      {Array.from({ length: 5 }, (v, i) => (\n        <Star\n          starId={i + 1}\n          key={`star_${i + 1} `}\n          marked={selection ? selection >= i + 1 : rating >= i + 1}\n        />\n      ))}\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<StarRating />, document.getElementById('root'));\nReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));\n```"
@@ -283,7 +283,7 @@
   {
     "name": "Tabs.md",
     "title": "Tabs",
-    "text": "Renders a tabbed menu and view component.\n\nDefine a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.\nUse the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\nUse `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.\nDefine `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.\n`changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.\n\n",
+    "text": "Renders a tabbed menu and view component.\n\n* Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.\n* Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.\n* Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.\n* Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.\n* `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.\n\n",
     "codeBlocks": [
       "```css\n.tab-menu > button {\n  cursor: pointer;\n  padding: 8px 16px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: none;\n}\n.tab-menu > button.focus {\n  border-bottom: 2px solid #007bef;\n}\n.tab-menu > button:hover {\n  border-bottom: 2px solid #007bef;\n}\n```",
       "```jsx\nfunction TabItem(props) {\n  return <div {...props} />;\n}\n\nfunction Tabs(props) {\n  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);\n  const changeTab = newIndex => {\n    if (typeof props.onTabClick === 'function') props.onTabClick(newIndex);\n    setBindIndex(newIndex);\n  };\n  const items = props.children.filter(item => item.type.name === 'TabItem');\n\n  return (\n    <div className=\"wrapper\">\n      <div className=\"tab-menu\">\n        {items.map(({ props: { index, label } }) => (\n          <button onClick={() => changeTab(index)} className={bindIndex === index ? 'focus' : ''}>\n            {label}\n          </button>\n        ))}\n      </div>\n      <div className=\"tab-view\">\n        {items.map(({ props }) => (\n          <div\n            {...props}\n            className=\"tab-view_item\"\n            key={props.index}\n            style={{ display: bindIndex === props.index ? 'block' : 'none' }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n```",
@@ -300,7 +300,7 @@
   {
     "name": "TextArea.md",
     "title": "TextArea",
-    "text": "Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.\n\nUse object destructuring to set defaults for certain attributes of the `<textarea>` element.\nRender a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n\n",
+    "text": "Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.\n\n* Use object destructuring to set defaults for certain attributes of the `<textarea>` element.\n* Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.\n\n",
     "codeBlocks": [
       "```jsx\nfunction TextArea({\n  callback,\n  cols = 20,\n  rows = 2,\n  disabled = false,\n  readOnly = false,\n  placeholder = ''\n}) {\n  return (\n    <textarea\n      cols={cols}\n      rows={rows}\n      disabled={disabled}\n      readOnly={readOnly}\n      placeholder={placeholder}\n      onChange={({ target: { value } }) => callback(value)}\n    />\n  );\n}\n```",
       "```jsx\nReactDOM.render(\n  <TextArea placeholder=\"Insert some text here...\" callback={val => console.log(val)} />,\n  document.getElementById('root')\n);\n```"
@@ -314,7 +314,7 @@
   {
     "name": "Ticker.md",
     "title": "Ticker",
-    "text": "Renders a ticker component.\n\nUse the `React.useState()` hook to initialize the `ticker` state variable to `0`.\nDefine two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.\nReturn a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.\n\n",
+    "text": "Renders a ticker component.\n\n* Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.\n* Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.\n* Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Ticker(props) {\n  const [ticker, setTicker] = React.useState(0);\n  let interval = null;\n\n  const tick = () => {\n    reset();\n    interval = setInterval(() => {\n      if (ticker < props.times) setTicker(ticker + 1);\n      else clearInterval(interval);\n    }, props.interval);\n  };\n\n  const reset = () => {\n    setTicker(0);\n    clearInterval(interval);\n  };\n\n  return (\n    <div>\n      <span style={{ fontSize: 100 }}>{this.state.ticker}</span>\n      <button onClick={this.tick}>Tick!</button>\n      <button onClick={this.reset}>Reset</button>\n    </div>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));\n```"
@@ -329,7 +329,7 @@
   {
     "name": "Toggle.md",
     "title": "Toggle",
-    "text": "Renders a toggle component.\n\nUse the `React.useState()` to initialize the `isToggleOn` state variable to `false`.\nUse an object, `style`, to hold the styles for individual components and their states.\nReturn a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
+    "text": "Renders a toggle component.\n\n* Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.\n* Use an object, `style`, to hold the styles for individual components and their states.\n* Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
     "codeBlocks": [
       "```jsx\nfunction Toggle(props) {\n  const [isToggleOn, setIsToggleOn] = React.useState(false);\n  style = {\n    on: {\n      backgroundColor: 'green'\n    },\n    off: {\n      backgroundColor: 'grey'\n    }\n  };\n\n  return (\n    <button onClick={() => setIsToggleOn(!isToggleOn)} style={isToggleOn ? style.on : style.off}>\n      {isToggleOn ? 'ON' : 'OFF'}\n    </button>\n  );\n}\n```",
       "```jsx\nReactDOM.render(<Toggle />, document.getElementById('root'));\n```"
@@ -344,7 +344,7 @@
   {
     "name": "Tooltip.md",
     "title": "Tooltip",
-    "text": "Renders a tooltip component.\n\nUse the `React.useState()` hook to create the `show` variable and initialize it to `false`.\nReturn a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.\nHandle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.\n\n",
+    "text": "Renders a tooltip component.\n\n* Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.\n* Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.\n* Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.\n\n",
     "codeBlocks": [
       "```css\n.tooltip {\n  position: relative;\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  visibility: hidden;\n  padding: 5px;\n  border-radius: 5px;\n}\n.tooltip-arrow {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  border-width: 5px;\n  border-style: solid;\n  border-color: rgba(0, 0, 0, 0.7) transparent transparent;\n}\n```",
       "```jsx\nfunction Tooltip({ children, text, ...rest }) {\n  const [show, setShow] = React.useState(false);\n\n  return (\n    <div>\n      <div className=\"tooltip\" style={show ? { visibility: 'visible' } : {}}>\n        {text}\n        <span className=\"tooltip-arrow\" />\n      </div>\n      <div {...rest} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n```",
@@ -361,7 +361,7 @@
   {
     "name": "TreeView.md",
     "title": "TreeView",
-    "text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse object destructuring to set defaults for certain props.\nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nUse the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\nReturn a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.\nDetermine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.\nFor each child in `data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `<p>` element with the appropriate style.\n\n",
+    "text": "Renders a tree view of a JSON object or array with collapsible content.\n\n* Use object destructuring to set defaults for certain props.\n* Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\n* Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\n* Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.\n* Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.\n* For each child in `data`, determine if it is an object or array and recursively render a sub-tree.\n* Otherwise, render a `<p>` element with the appropriate style.\n\n",
     "codeBlocks": [
       "```css\n.tree-element {\n  margin: 0;\n  position: relative;\n}\n\ndiv.tree-element:before {\n  content: '';\n  position: absolute;\n  top: 24px;\n  left: 1px;\n  height: calc(100% - 48px);\n  border-left: 1px solid gray;\n}\n\n.toggler {\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 5px solid gray;\n  cursor: pointer;\n}\n\n.toggler.closed {\n  transform: rotate(90deg);\n}\n\n.collapsed {\n  display: none;\n}\n```",
       "```jsx\nfunction TreeView({\n  data,\n  toggled = true,\n  name = null,\n  isLast = true,\n  isChildElement = false,\n  isParentToggled = true\n}) {\n  const [isToggled, setIsToggled] = React.useState(toggled);\n\n  return (\n    <div\n      style={{ marginLeft: isChildElement ? 16 : 4 + 'px' }}\n      className={isParentToggled ? 'tree-element' : 'tree-element collapsed'}\n    >\n      <span\n        className={isToggled ? 'toggler' : 'toggler closed'}\n        onClick={() => setIsToggled(!isToggled)}\n      />\n      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}\n      {Array.isArray(data) ? '[' : '{'}\n      {!isToggled && '...'}\n      {Object.keys(data).map((v, i, a) =>\n        typeof data[v] == 'object' ? (\n          <TreeView\n            data={data[v]}\n            isLast={i === a.length - 1}\n            name={Array.isArray(data) ? null : v}\n            isChildElement\n            isParentToggled={isParentToggled && isToggled}\n          />\n        ) : (\n          <p\n            style={{ marginLeft: 16 + 'px' }}\n            className={isToggled ? 'tree-element' : 'tree-element collapsed'}\n          >\n            {Array.isArray(data) ? '' : <strong>{v}: </strong>}\n            {data[v]}\n            {i === a.length - 1 ? '' : ','}\n          </p>\n        )\n      )}\n      {Array.isArray(data) ? ']' : '}'}\n      {!isLast ? ',' : ''}\n    </div>\n  );\n}\n```",
diff --git a/snippet-template.md b/snippet-template.md
index 82bdbcb59..162631fda 100644
--- a/snippet-template.md
+++ b/snippet-template.md
@@ -2,7 +2,9 @@
 
 Explain briefly what the snippet does.
 
-Explain briefly how the snippet works.
+* Explain briefly how the snippet works.
+* Use bullet points for your snippet's explanation.
+* Try to explain everything briefly but clearly.
 
 ```jsx
 function ComponentName(props) {
diff --git a/snippets/Accordion.md b/snippets/Accordion.md
index f33da4fe2..9d9ab94f3 100644
--- a/snippets/Accordion.md
+++ b/snippets/Accordion.md
@@ -2,11 +2,11 @@
 
 Renders an accordion menu with multiple collapsible content components.
 
-Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.
-Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.
-In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
-Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.
-Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
+* Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`.
+* Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `props.handleClick` callback and the content of the component, passed down via `props.children`, while its appearance is determined by `props.isCollapsed` and based on `style`.
+* In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
+* Use `Array.prototype.map` on the collected nodes to render the individual collapsiple elements.
+* Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
 `changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.
 
 ```jsx
diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md
index 9c2f9156d..2b75bed5a 100644
--- a/snippets/AutoLink.md
+++ b/snippets/AutoLink.md
@@ -2,8 +2,8 @@
 
 Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
 
-Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
-Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
+* Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
+* Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
 
 ```jsx
 function AutoLink({ text }) {
diff --git a/snippets/Carousel.md b/snippets/Carousel.md
index b7e89cdcb..1d3656b26 100644
--- a/snippets/Carousel.md
+++ b/snippets/Carousel.md
@@ -2,11 +2,11 @@
 
 Renders a carousel component.
 
-Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
-Use an object, `style`, to hold the styles for the individual components.
-Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
-Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
-Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
+* Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
+* Use an object, `style`, to hold the styles for the individual components.
+* Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
+* Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
+* Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
 
 ```jsx
 function Carousel(props) {
diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 394fce744..825697494 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -2,11 +2,11 @@
 
 Renders a component with collapsible content.
 
-Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
-Use an object, `style`, to hold the styles for individual components and their states.
-Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.
-Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
-Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
+* Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
+* Use an object, `style`, to hold the styles for individual components and their states.
+* Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.
+* Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
+* Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
 
 ```jsx
 function Collapse(props) {
diff --git a/snippets/CountDown.md b/snippets/CountDown.md
index 9378aa874..ef40c73b6 100644
--- a/snippets/CountDown.md
+++ b/snippets/CountDown.md
@@ -2,14 +2,14 @@
 
 Renders a countdown timer that prints a message when it reaches zero.
 
-Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.
-Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.
-Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).
-If `paused` or `over` is `true`, `tick` will return immediately.
-Create a method `reset`, that resets all state variables to their initial states.
-Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.
-Use a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.
-If `over` is `true`, the timer will display a message instead of the value of `time`.
+* Use object destructuring to set defaults for the `hours`, `minutes` and `seconds` props.
+* Use the `React.useState()` hook to create the `time`, `paused` and `over` state variables and set their values to the values of the passed props, `false` and `false` respectively.
+* Create a method `tick`, that updates the value of `time` based on the current value (i.e. decreasing the time by one second).
+* If `paused` or `over` is `true`, `tick` will return immediately.
+* Create a method `reset`, that resets all state variables to their initial states.
+* Use the the `React.useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to cleanup when the component is unmounted.
+* Use a `<div>` to wrap a `<p>` element with the textual representation of the components `time` state variable, as well as two `<button>` elements that will pause/unpause and restart the timer respectively.
+* If `over` is `true`, the timer will display a message instead of the value of `time`.
 
 ```jsx
 function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
diff --git a/snippets/DataList.md b/snippets/DataList.md
index 11e23681f..fdeeb8c21 100644
--- a/snippets/DataList.md
+++ b/snippets/DataList.md
@@ -2,9 +2,9 @@
 
 Renders a list of elements from an array of primitives.
 
-Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
-Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.
-Omit the `isOrdered` prop to render a `<ul>` list by default.
+* Use the value of the `isOrdered` prop to conditionally render a `<ol>` or `<ul>` list.
+* Use `Array.prototype.map` to render every item in `data` as a `<li>` element, give it a `key` produced from the concatenation of the its index and value.
+* Omit the `isOrdered` prop to render a `<ul>` list by default.
 
 ```jsx
 function DataList({ isOrdered, data }) {
diff --git a/snippets/DataTable.md b/snippets/DataTable.md
index 5433129e9..d86402001 100644
--- a/snippets/DataTable.md
+++ b/snippets/DataTable.md
@@ -2,8 +2,8 @@
 
 Renders a table with rows dynamically created from an array of primitives.
 
-Render a `<table>` element with two columns (`ID` and `Value`).
-Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
+* Render a `<table>` element with two columns (`ID` and `Value`).
+* Use `Array.prototype.map` to render every item in `data` as a `<tr>` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
 
 ```jsx
 function DataTable({ data }) {
diff --git a/snippets/FileDrop.md b/snippets/FileDrop.md
index 927ffa812..a45e3fa31 100644
--- a/snippets/FileDrop.md
+++ b/snippets/FileDrop.md
@@ -2,15 +2,14 @@
 
 Renders a file drag and drop component for a single file.
 
-Create a ref called `dropRef` for this component.
-Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
+* Create a ref called `dropRef` for this component.
+* Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
 The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.
-
-Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.
-Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.
-`handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.
-Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.
-Finally, bind the `ref` of the created `<div>` to `dropRef`.
+* Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.
+* Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.
+* `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.
+* Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.
+* Finally, bind the `ref` of the created `<div>` to `dropRef`.
 
 ```css
 .filedrop {
diff --git a/snippets/Input.md b/snippets/Input.md
index b88dbf3b0..f530677b6 100644
--- a/snippets/Input.md
+++ b/snippets/Input.md
@@ -2,8 +2,8 @@
 
 Renders an `<input>` element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<input>` element.
-Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+* Use object destructuring to set defaults for certain attributes of the `<input>` element.
+* Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
 
 ```jsx
 function Input({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md
index fa364498d..fefd0b345 100644
--- a/snippets/LimitedTextarea.md
+++ b/snippets/LimitedTextarea.md
@@ -2,10 +2,10 @@
 
 Renders a textarea component with a character limit.
 
-Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
+* Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
 Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.
-Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
-Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
+* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
+* Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 
 ```jsx
 function LimitedTextarea({ rows, cols, value, limit }) {
diff --git a/snippets/LimitedWordTextarea.md b/snippets/LimitedWordTextarea.md
index 15b5396ab..fe796389c 100644
--- a/snippets/LimitedWordTextarea.md
+++ b/snippets/LimitedWordTextarea.md
@@ -2,11 +2,11 @@
 
 Renders a textarea component with a word limit.
 
-Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.
-Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.
-If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.
-Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
-Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
+* Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.
+* Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.
+* If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.
+* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
+* Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 
 ```jsx
 function LimitedWordTextarea({ rows, cols, value, limit }) {
diff --git a/snippets/Mailto.md b/snippets/Mailto.md
index 6e9c50be7..82644a8ce 100644
--- a/snippets/Mailto.md
+++ b/snippets/Mailto.md
@@ -2,8 +2,8 @@
 
 Renders a link formatted to send an email.
 
-Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
-Render the link with `props.children` as its content.
+* Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
+* Render the link with `props.children` as its content.
 
 ```jsx
 function Mailto({ email, subject, body, ...props }) {
diff --git a/snippets/MappedTable.md b/snippets/MappedTable.md
index 7e8e22cd8..59cc8a214 100644
--- a/snippets/MappedTable.md
+++ b/snippets/MappedTable.md
@@ -2,10 +2,10 @@
 
 Renders a table with rows dynamically created from an array of objects and a list of property names.
 
-Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
-Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
-Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.
-Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
+* Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
+* Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
+* Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.
+* Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
 
 ```jsx
 function MappedTable({ data, propertyNames }) {
diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md
index d0e3b82c3..7584cbb3e 100644
--- a/snippets/MultiselectCheckbox.md
+++ b/snippets/MultiselectCheckbox.md
@@ -2,10 +2,10 @@
 
 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.
+* 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 = {
diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
index 91d9e8acb..ba32a3a6b 100644
--- a/snippets/PasswordRevealer.md
+++ b/snippets/PasswordRevealer.md
@@ -2,8 +2,8 @@
 
 Renders a password input field with a reveal button.
 
-Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.
-Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
+* Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.
+* Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
 
 ```jsx
 function PasswordRevealer({ value }) {
diff --git a/snippets/Select.md b/snippets/Select.md
index c92fdfbd8..010d5cd4e 100644
--- a/snippets/Select.md
+++ b/snippets/Select.md
@@ -2,9 +2,9 @@
 
 Renders a `<select>` element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<select>` element.
-Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
-Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
+* Use object destructuring to set defaults for certain attributes of the `<select>` element.
+* Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+* Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
 
 ```jsx
 function Select({ values, callback, disabled = false, readonly = false, selected }) {
diff --git a/snippets/Slider.md b/snippets/Slider.md
index e89bd8ba3..b3f266b1e 100644
--- a/snippets/Slider.md
+++ b/snippets/Slider.md
@@ -2,8 +2,8 @@
 
 Renders a slider element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<input>` element.
-Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+* Use object destructuring to set defaults for certain attributes of the `<input>` element.
+* Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
 
 ```jsx
 function Slider({ callback, disabled = false, readOnly = false }) {
diff --git a/snippets/StarRating.md b/snippets/StarRating.md
index de02c27be..573467fb5 100644
--- a/snippets/StarRating.md
+++ b/snippets/StarRating.md
@@ -2,11 +2,11 @@
 
 Renders a star rating component.
 
-Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
-In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
-Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
-Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
-Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
+* Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
+* In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
+* Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
+* Create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
+* Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
 
 ```jsx
 function Star({ marked, starId }) {
diff --git a/snippets/Tabs.md b/snippets/Tabs.md
index 5b15723f2..5245dc904 100644
--- a/snippets/Tabs.md
+++ b/snippets/Tabs.md
@@ -2,11 +2,11 @@
 
 Renders a tabbed menu and view component.
 
-Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.
-Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
-Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.
-Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
-`changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
+* Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.
+* Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`.
+* Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`.
+* Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
+* `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
 
 ```css
 .tab-menu > button {
diff --git a/snippets/TextArea.md b/snippets/TextArea.md
index 1ce9b3a6c..2771b1ef3 100644
--- a/snippets/TextArea.md
+++ b/snippets/TextArea.md
@@ -2,8 +2,8 @@
 
 Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
 
-Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
-Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+* Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
+* Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
 
 ```jsx
 function TextArea({
diff --git a/snippets/Ticker.md b/snippets/Ticker.md
index b82c84bf3..c13a63235 100644
--- a/snippets/Ticker.md
+++ b/snippets/Ticker.md
@@ -2,9 +2,9 @@
 
 Renders a ticker component.
 
-Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.
-Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.
-Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.
+* Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.
+* Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.
+* Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.
 
 ```jsx
 function Ticker(props) {
@@ -41,3 +41,4 @@ ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('r
 <!-- tags: visual,state -->
 
 <!-- expertise: 1 -->
+* 
\ No newline at end of file
diff --git a/snippets/Toggle.md b/snippets/Toggle.md
index 1b42438bb..2601d2a60 100644
--- a/snippets/Toggle.md
+++ b/snippets/Toggle.md
@@ -2,9 +2,9 @@
 
 Renders a toggle component.
 
-Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.
-Use an object, `style`, to hold the styles for individual components and their states.
-Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
+* Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.
+* Use an object, `style`, to hold the styles for individual components and their states.
+* Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
 
 ```jsx
 function Toggle(props) {
diff --git a/snippets/Tooltip.md b/snippets/Tooltip.md
index 0134019d1..5fe229c79 100644
--- a/snippets/Tooltip.md
+++ b/snippets/Tooltip.md
@@ -2,9 +2,9 @@
 
 Renders a tooltip component.
 
-Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
-Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
-Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
+* Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
+* Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
+* Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
 
 ```css
 .tooltip {
diff --git a/snippets/TreeView.md b/snippets/TreeView.md
index 012244116..364267bc7 100644
--- a/snippets/TreeView.md
+++ b/snippets/TreeView.md
@@ -2,13 +2,13 @@
 
 Renders a tree view of a JSON object or array with collapsible content.
 
-Use object destructuring to set defaults for certain props.
-Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
-Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
-Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
-Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.
-For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
-Otherwise, render a `<p>` element with the appropriate style.
+* Use object destructuring to set defaults for certain props.
+* Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
+* Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
+* Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
+* Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.
+* For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
+* Otherwise, render a `<p>` element with the appropriate style.
 
 ```css
 .tree-element {