Update snippet formatting

snippets/AutoLink.md

@@ -9,7 +9,7 @@ Renders a string as plaintext, with URLs converted to appropriate `<a>` elements
 - 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 }) {
+const AutoLink = ({ text }) => {
   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;
 
   return (
@@ -24,7 +24,7 @@ function AutoLink({ text }) {
       })}
     </React.Fragment>
   );
-}
+};
 ```
 
 ```jsx

snippets/ControlledInput.md

@@ -6,19 +6,19 @@ tags: components,state,effect,intermediate
 Renders an `<input>` element with internal state, 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.
-- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.
+- Use the `React.useState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.
 - Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.
 - Render an `<input>` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.
 
 ```jsx
-function ControlledInput({
+const ControlledInput = ({
   callback,
   type = 'text',
   disabled = false,
   readOnly = false,
   defaultValue,
   placeholder = ''
-}) {
+}) => {
   const [value, setValue] = React.useState(defaultValue);
 
   React.useEffect(() => {
@@ -35,7 +35,7 @@ function ControlledInput({
       onChange={({ target: { value } }) => setValue(value)}
     />
   );
-}
+};
 ```
 
 ```jsx

snippets/CountDown.md

@@ -15,7 +15,7 @@ Renders a countdown timer that prints a message when it reaches zero.
 - 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 }) {
+const CountDown = ({ hours = 0, minutes = 0, seconds = 0 }) => {
   const [paused, setPaused] = React.useState(false);
   const [over, setOver] = React.useState(false);
   const [time, setTime] = React.useState({
@@ -27,24 +27,25 @@ function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
   const tick = () => {
     if (paused || over) return;
     if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true);
-    else if (time.minutes == 0 && time.seconds == 0)
+    else if (time.minutes == 0 && time.seconds == 0) {
       setTime({
         hours: time.hours - 1,
         minutes: 59,
         seconds: 59
       });
-    else if (time.seconds == 0)
+    } else if (time.seconds == 0) {
       setTime({
         hours: time.hours,
         minutes: time.minutes - 1,
         seconds: 59
       });
-    else
+    } else {
       setTime({
         hours: time.hours,
         minutes: time.minutes,
         seconds: time.seconds - 1
       });
+    }
   };
 
   const reset = () => {
@@ -72,7 +73,7 @@ function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
       <button onClick={() => reset()}>Restart</button>
     </div>
   );
-}
+};
 ```
 
 ```jsx

snippets/DataList.md

@@ -10,10 +10,10 @@ Renders a list of elements from an array of primitives.
 - Omit the `isOrdered` prop to render a `<ul>` list by default.
 
 ```jsx
-function DataList({ isOrdered, data }) {
+const DataList = ({ isOrdered, data }) => {
   const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
   return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
-}
+};
 ```
 
 ```jsx

snippets/DataTable.md

@@ -9,7 +9,7 @@ Renders a table with rows dynamically created from an array of primitives.
 - 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 }) {
+const DataTable = ({ data }) => {
   return (
     <table>
       <thead>
@@ -28,7 +28,7 @@ function DataTable({ data }) {
       </tbody>
     </table>
   );
-}
+};
 ```
 
 ```jsx

snippets/LimitedTextarea.md

@@ -11,7 +11,7 @@ Renders a textarea component with a character limit.
 - 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 }) {
+const LimitedTextarea = ({ rows, cols, value, limit }) => {
   const [content, setContent] = React.useState(value);
 
   const setFormattedContent = text => {
@@ -35,7 +35,7 @@ function LimitedTextarea({ rows, cols, value, limit }) {
       </p>
     </div>
   );
-}
+};
 ```
 
 ```jsx

snippets/LimitedWordTextarea.md

@@ -12,7 +12,7 @@ Renders a textarea component with a word limit.
 - 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 }) {
+const LimitedWordTextarea = ({ rows, cols, value, limit }) => {
   const [content, setContent] = React.useState(value);
   const [wordCount, setWordCount] = React.useState(0);
 
@@ -49,7 +49,7 @@ function LimitedWordTextarea({ rows, cols, value, limit }) {
       </p>
     </div>
   );
-}
+};
 ```
 
 ```jsx

snippets/Loader.md

@@ -40,7 +40,7 @@ Creates a spinning loader component.
 ```
 
 ```jsx
-function Loader({ size }) {
+const Loader = ({ size }) => {
   return (
     <svg
       className="loader"
@@ -57,7 +57,7 @@ function Loader({ size }) {
       <circle cx="12" cy="12" r="10" />
     </svg>
   );
-}
+};
 ```
 
 ```jsx

snippets/MappedTable.md

@@ -7,13 +7,13 @@ Renders a table with rows dynamically created from an array of objects and a lis
 
 - 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 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 `Array.prototype.map()` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
 
 _This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`_
 
 ```jsx
-function MappedTable({ data, propertyNames }) {
+const MappedTable = ({ data, propertyNames }) => {
   let filteredData = data.map(v =>
     Object.keys(v)
       .filter(k => propertyNames.includes(k))
@@ -39,7 +39,7 @@ function MappedTable({ data, propertyNames }) {
       </tbody>
     </table>
   );
-}
+};
 ```
 
 ```jsx

snippets/Modal.md

@@ -92,20 +92,20 @@ To use the component, import `Modal` only once and then display it by passing a
 ```
 
 ```jsx
-function Modal({ isVisible = false, title, content, footer, onClose }) {
+const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
   React.useEffect(() => {
     document.addEventListener('keydown', keydownHandler);
     return () => document.removeEventListener('keydown', keydownHandler);
   });
 
-  function keydownHandler({ key }) {
+  const keydownHandler = ({ key }) => {
     switch (key) {
     case 'Escape':
       onClose();
       break;
     default:
     }
-  }
+  };
 
   return !isVisible ? null : (
     <div className="modal" onClick={onClose}>
@@ -123,12 +123,11 @@ function Modal({ isVisible = false, title, content, footer, onClose }) {
       </div>
     </div>
   );
-}
+};
 ```
 
 ```jsx
-//Add the component to the render function
+const App = () => {
-function App() {
   const [isModal, setModal] = React.useState(false);
 
   return (
@@ -143,7 +142,7 @@ function App() {
       />
     </React.Fragment>
   );
-}
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

snippets/MultiselectCheckbox.md

@@ -5,7 +5,7 @@ tags: components,input,state,array,intermediate
 
 Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
 
-- Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.
+- Use `React.useState()` to create a `data` state variable and set its initial value equal to the `options` prop.
 - Create a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callback passed via the component's props.
 - Render a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.
 - Each `<input>` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `<li>` element's `onClick` handler.
@@ -22,7 +22,7 @@ const style = {
   }
 };
 
-function MultiselectCheckbox({ options, onChange }) {
+const MultiselectCheckbox = ({ options, onChange }) => {
   const [data, setData] = React.useState(options);
 
   const toggle = item => {
@@ -45,7 +45,7 @@ function MultiselectCheckbox({ options, onChange }) {
       })}
     </ul>
   );
-}
+};
 ```
 
 ```jsx

snippets/PasswordRevealer.md

@@ -9,7 +9,7 @@ Renders a password input field with a reveal button.
 - 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 }) {
+const PasswordRevealer = ({ value }) => {
   const [shown, setShown] = React.useState(false);
 
   return (
@@ -18,7 +18,7 @@ function PasswordRevealer({ value }) {
       <button onClick={() => setShown(!shown)}>Show/Hide</button>
     </div>
   );
-}
+};
 ```
 
 ```jsx

snippets/RippleButton.md

@@ -61,7 +61,7 @@ Renders a button that animates a ripple effect when clicked.
 ```
 
 ```jsx
-function RippleButton({ children, onClick }) {
+const RippleButton = ({ children, onClick }) => {
   const [coords, setCoords] = React.useState({ x: -1, y: -1 });
   const [isRippling, setIsRippling] = React.useState(false);
 
@@ -102,12 +102,12 @@ function RippleButton({ children, onClick }) {
           }}
         />
       ) : (
-        ""
+        ''
       )}
       <span className="content">{children}</span>
     </button>
   );
-}
+};
 ```
 
 ```jsx

snippets/Select.md

@@ -11,7 +11,7 @@ Renders a `<select>` element that uses a callback function to pass its value to
 - Use destructuring on the `values` array to pass an array of `value` and `text` elements.
 
 ```jsx
-function Select({ values, callback, disabled = false, readonly = false, selected }) {
+const Select = ({ values, callback, disabled = false, readonly = false, selected }) => {
   return (
     <select
       disabled={disabled}
@@ -26,22 +26,11 @@ function Select({ values, callback, disabled = false, readonly = false, selected
       ))}
     </select>
   );
-}
+};
-
-let choices = [
-  ['grapefruit', 'Grapefruit'],
-  ['lime', 'Lime'],
-  ['coconut', 'Coconut'],
-  ['mango', 'Mango']
-];
-ReactDOM.render(
-  <Select values={choices} selected="lime" callback={val => console.log(val)} />,
-  document.getElementById('root')
-);
 ```
 
 ```jsx
-let choices = [
+const choices = [
   ['grapefruit', 'Grapefruit'],
   ['lime', 'Lime'],
   ['coconut', 'Coconut'],

snippets/Slider.md

@@ -9,7 +9,7 @@ Renders a slider element that uses a callback function to pass its value to the
 - 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 }) {
+const Slider = ({ callback, disabled = false, readOnly = false }) => {
   return (
     <input
       type="range"
@@ -18,7 +18,7 @@ function Slider({ callback, disabled = false, readOnly = false }) {
       onChange={({ target: { value } }) => callback(value)}
     />
   );
-}
+};
 ```
 
 ```jsx

snippets/TextArea.md

@@ -9,14 +9,14 @@ Renders a `<textarea>` element that uses a callback function to pass its value t
 - 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({
+const TextArea = ({
   callback,
   cols = 20,
   rows = 2,
   disabled = false,
   readOnly = false,
   placeholder = ''
-}) {
+}) => {
   return (
     <textarea
       cols={cols}
@@ -27,7 +27,7 @@ function TextArea({
       onChange={({ target: { value } }) => callback(value)}
     />
   );
-}
+};
 ```
 
 ```jsx

snippets/TreeView.md

@@ -7,7 +7,7 @@ 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.
+- Use the `React.useState()` 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.
@@ -50,14 +50,14 @@ div.tree-element:before {
 ```
 
 ```jsx
-function TreeView({
+const TreeView = ({
   data,
   toggled = true,
   name = null,
   isLast = true,
   isChildElement = false,
   isParentToggled = true
-}) {
+}) => {
   const [isToggled, setIsToggled] = React.useState(toggled);
 
   return (
@@ -96,11 +96,11 @@ function TreeView({
       {!isLast ? ',' : ''}
     </div>
   );
-}
+};
 ```
 
 ```jsx
-let data = {
+const data = {
   lorem: {
     ipsum: 'dolor sit',
     amet: {

snippets/UncontrolledInput.md

@@ -9,13 +9,13 @@ Renders an `<input>` element that uses a callback function to pass its value to
 - 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 UncontrolledInput({
+const UncontrolledInput = ({
   callback,
   type = 'text',
   disabled = false,
   readOnly = false,
   placeholder = ''
-}) {
+}) => {
   return (
     <input
       type={type}
@@ -25,7 +25,7 @@ function UncontrolledInput({
       onChange={({ target: { value } }) => callback(value)}
     />
   );
-}
+};
 ```
 
 ```jsx