Update wording

snippets/Accordion.md

@@ -2,14 +2,14 @@
 title: Accordion
 tags: components,children,state,advanced
 firstSeen: 2019-03-02T10:46:34+02:00
-lastUpdated: 2021-01-07T23:57:13+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders an accordion menu with multiple collapsible content elements.
 
-- Define an `AccordionItem` component, that renders a `<button>` which is used to update the component and notify its parent via the `handleClick` callback.
-- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set an appropriate `className`.
-- Define an `Accordion` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Define an `AccordionItem` component, that renders a `<button>`. The button updates the component and notifies its parent via the `handleClick` callback.
+- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set its `className`.
+- Define an `Accordion` component. Use the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
 - Filter `children` to remove unnecessary nodes except for `AccordionItem` by identifying the function's name.
 - Use `Array.prototype.map()` on the collected nodes to render the individual collapsible elements.
 - Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.

snippets/Collapse.md

@@ -2,14 +2,14 @@
 title: Collapse
 tags: components,children,state,beginner
 firstSeen: 2018-10-17T20:42:23+03:00
-lastUpdated: 2020-11-03T20:42:15+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a component with collapsible content.
 
-- Use the `useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`.
+- Use the `useState()` hook to create the `isCollapsed` state variable. Give it an initial value of `collapsed`.
 - Use the `<button>` to change the component's `isCollapsed` state and the content of the component, passed down via `children`.
-- Determine the appearance of the content, based on `isCollapsed` and apply the appropriate `className`.
+- Use `isCollapsed` to determine the appearance of the content and apply the appropriate `className`.
 - Update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
 
 ```css

snippets/CountDown.md

@@ -2,12 +2,12 @@
 title: CountDown
 tags: components,state,advanced
 firstSeen: 2019-02-06T14:39:31+02:00
-lastUpdated: 2020-11-26T23:57:34+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a countdown timer that prints a message when it reaches zero.
 
-- Use the `useState()` hook to create a state variable to hold the time value, initialize it from the props and destructure it into its components.
+- Use the `useState()` hook to create a state variable to hold the time value. Initialize it from the props and destructure it into its components.
 - Use the `useState()` hook to create the `paused` and `over` state variables, used to prevent the timer from ticking if it's paused or the time has run out.
 - Create a method `tick`, that updates the time values based on the current value (i.e. decreasing the time by one second).
 - Create a method `reset`, that resets all state variables to their initial states.

snippets/FileDrop.md

@@ -2,16 +2,16 @@
 title: FileDrop
 tags: components,input,state,effect,event,advanced
 firstSeen: 2019-02-02T12:17:27+02:00
-lastUpdated: 2020-11-26T09:43:21+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a file drag and drop component for a single file.
 
 - Create a ref, called `dropRef` and bind it to the component's wrapper.
-- Use the `useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
+- Use the `useState()` hook to create the `drag` and `filename` variables. Initialize them 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.
-- `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 `onDrop`.
+- `handleDrag` prevents the browser from opening the dragged file. `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component. `handleDrop` handles the file being dropped and passes it to `onDrop`.
 - Use the `useEffect()` hook to handle each of the drag and drop events using the previously created methods.
 
 ```css

snippets/LimitedTextarea.md

@@ -2,12 +2,12 @@
 title: LimitedTextarea
 tags: components,state,callback,event,beginner
 firstSeen: 2018-10-19T09:11:59+03:00
-lastUpdated: 2020-11-16T16:50:57+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a textarea component with a character limit.
 
-- Use the `useState()` hook to create the `content` state variable and set its value to that of `value` prop, trimmed down to `limit` characters.
+- Use the `useState()` hook to create the `content` state variable. Set its value to that of `value` prop, trimmed down to `limit` characters.
 - Create a method `setFormattedContent`, which trims the content down to `limit` characters and memoize it, using the `useCallback()` hook.
 - Bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of the fired event.
 

snippets/LimitedWordTextarea.md

@@ -2,14 +2,14 @@
 title: LimitedWordTextarea
 tags: components,input,state,callback,effect,event,intermediate
 firstSeen: 2019-02-20T18:22:22+02:00
-lastUpdated: 2021-01-07T23:57:13+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a textarea component with a word limit.
 
-- Use the `useState()` hook to create a state variable, containing `content` and `wordCount`, using the `value` prop and `0` as the initial values respectively.
+- Use the `useState()` hook to create a state variable, containing `content` and `wordCount`. Use the `value` prop and `0` as the initial values respectively.
 - Use the `useCallback()` hooks to create a memoized function, `setFormattedContent`, that uses `String.prototype.split()` to turn the input into an array of words.
-- Check if the result of applying `Array.prototype.filter()` combined with `Boolean` has a `length` longer than `limit` and, if so, trim the input, otherwise return the raw input, updating state accordingly in both cases.
+- Check if the result of applying `Array.prototype.filter()` combined with `Boolean` has a `length` longer than `limit`. If it does, trim the input. Otherwise return the raw input, updating state accordingly in both cases.
 - Use the `useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable during the initial render.
 - Bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 

snippets/MappedTable.md

@@ -12,7 +12,7 @@ Renders a table with rows dynamically created from an array of objects and a lis
 - 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.
 
-_This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`_
+_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
 const MappedTable = ({ data, propertyNames }) => {

snippets/Modal.md

@@ -2,12 +2,12 @@
 title: Modal
 tags: components,effect,intermediate
 firstSeen: 2019-03-11T11:25:06+02:00
-lastUpdated: 2020-11-25T21:12:16+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a Modal component, controllable through events.
 
-- Define `keydownHandler`, a method which handles all keyboard events and is used to call `onClose` when the `Esc` key is pressed.
+- Define a `keydownHandler` that handles all keyboard events and calls `onClose` when the `Esc` key is pressed.
 - Use the `useEffect()` hook to add or remove the `keydown` event listener to the `document`, calling `keydownHandler` for every event.
 - Add a styled `<span>` element that acts as a close button, calling `onClose` when clicked.
 - Use the `isVisible` prop passed down from the parent to determine if the modal should be displayed or not.

snippets/MultiselectCheckbox.md

@@ -2,14 +2,14 @@
 title: MultiselectCheckbox
 tags: components,input,state,array,intermediate
 firstSeen: 2019-01-27T09:25:57+02:00
-lastUpdated: 2020-11-26T23:57:34+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
 
 - Use the `useState()` hook to create the `data` state variable and use the `options` prop to initialize its value.
 - Create a `toggle` function that uses the spread operator (`...`) and `Array.prototype.splice()` to update the `data` state variable and call the `onChange` callback with any `checked` options.
-- Use `Array.prototype.map()` to map the `data` state variable to individual `<input type="checkbox">` elements, each one wrapped in a `<label>`, binding the `onClick` handler to the `toggle` function.
+- Use `Array.prototype.map()` to map the `data` state variable to individual `<input type="checkbox">` elements. Wrap each one in a `<label>`, binding the `onClick` handler to the `toggle` function.
 
 ```jsx
 const MultiselectCheckbox = ({ options, onChange }) => {

snippets/PasswordRevealer.md

@@ -8,7 +8,7 @@ lastUpdated: 2020-11-25T20:46:35+02:00
 Renders a password input field with a reveal button.
 
 - Use the `useState()` hook to create the `shown` state variable and set its value to `false`.
-- When the `<button>` is clicked, execute `setShown`, toggling the `type` of the `<input>` between `"text"` and `"password"`.
+- When the `<button>` is clicked, execute `setShown`, toggling the `type` of the `<input>` between `'text'` and `'password'`.
 
 ```jsx
 const PasswordRevealer = ({ value }) => {

snippets/RippleButton.md

@@ -2,12 +2,12 @@
 title: RippleButton
 tags: components,state,effect,intermediate
 firstSeen: 2019-09-10T09:07:29+03:00
-lastUpdated: 2020-11-26T09:43:21+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a button that animates a ripple effect when clicked.
 
-- Use the `useState()` hook to create the `coords` and `isRippling` state variables for the pointer's coordinates and the animation state of the button respectively.
+- Use the `useState()` hook to create the `coords` and `isRippling` state variables. These are used for the pointer's coordinates and the animation state of the button respectively.
 - Use a `useEffect()` hook to change the value of `isRippling` every time the `coords` state variable changes, starting the animation.
 - Use `setTimeout()` in the previous hook to clear the animation after it's done playing.
 - Use a `useEffect()` hook to reset `coords` whenever the `isRippling` state variable is `false.`

snippets/StarRating.md

@@ -2,16 +2,16 @@
 title: StarRating
 tags: components,children,input,state,intermediate
 firstSeen: 2018-10-18T14:33:45+03:00
-lastUpdated: 2020-11-26T23:57:34+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 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 `useState()` hook to define the `rating` and `selection` state variables with the appropriate initial values.
+- Define a `Star` component. It renders each individual star with the appropriate appearance, based on the parent component's state.
+- Define a `StarRating` component. Use the `useState()` hook to define the `rating` and `selection` state variables with the appropriate initial values.
 - Create a method, `hoverOver`, that updates `selected` according to the provided `event`, using the .`data-star-id` attribute of the event's target or resets it to `0` if called with a `null` argument.
 - Use `Array.from()` to create an array of `5` elements and `Array.prototype.map()` to create individual `<Star>` components.
-- Handle the `onMouseOver` and `onMouseLeave` events of the wrapping element using `hoverOver` and the `onClick` event using `setRating`.
+- Handle the `onMouseOver` and `onMouseLeave` events of the wrapping element using `hoverOver`. Handle the `onClick` event using `setRating`.
 
 ```css
 .star {

snippets/Tabs.md

@@ -2,16 +2,17 @@
 title: Tabs
 tags: components,state,children,intermediate
 firstSeen: 2019-01-27T11:59:52+02:00
-lastUpdated: 2020-11-25T20:46:35+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Renders a tabbed menu and view component.
 
-- Define a `Tabs` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Define a `Tabs` component. Use the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
 - Define a `TabItem` component and filter `children` passed to the `Tabs` component to remove unnecessary nodes except for `TabItem` by identifying the function's name.
 - Define `changeTab`, which will be executed when clicking a `<button>` from the menu.
 - `changeTab` executes the passed callback, `onTabClick`, and updates `bindIndex` based on the clicked element.
-- Use `Array.prototype.map()` on the collected nodes to render the menu and view of the tabs, using the value of `binIndex` to determine the active tab and apply the correct `className`.
+- Use `Array.prototype.map()` on the collected nodes to render the menu and view of the tabs.
+- Use the value of `bindIndex` to determine the active tab and apply the correct `className`.
 
 ```css
 .tab-menu > button {

snippets/useComponentDidMount.md

@@ -2,12 +2,12 @@
 title: useComponentDidMount
 tags: hooks,effect,beginner
 firstSeen: 2020-01-03T15:56:54+02:00
-lastUpdated: 2020-11-16T14:17:53+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Executes a callback immediately after a component is mounted.
 
-- Use `useEffect()` with an empty array as the second argument to execute the provided callback only once when the component is mounted.
+- Use `useEffect()` with an empty array as the second argument. This will execute the provided callback only once when the component is mounted.
 - Behaves like the `componentDidMount()` lifecycle method of class components.
 
 ```jsx

snippets/useComponentWillUnmount.md

@@ -2,12 +2,12 @@
 title: useComponentWillUnmount
 tags: hooks,effect,beginner
 firstSeen: 2020-01-03T16:00:56+02:00
-lastUpdated: 2020-11-16T14:17:53+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Executes a callback immediately before a component is unmounted and destroyed.
 
-- Use `useEffect()` with an empty array as the second argument and return the provided callback to be executed only once before cleanup.
+- Use `useEffect()` with an empty array as the second argument. Return the provided callback to be executed only once before cleanup.
 - Behaves like the `componentWillUnmount()` lifecycle method of class components.
 
 ```jsx

snippets/useIsomporphicEffect.md

@@ -2,11 +2,12 @@
 title: useIsomporphicEffect
 tags: hooks,effect,beginner
 firstSeen: 2021-09-29T05:00:00-04:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Eesolves to `useEffect()` on the server and `useLayoutEffect()` on the client.
 
-- Use `typeof` to check if the `window` object is defined and return the `useLayoutEffect()` if it is, or `useEffect()` otherwise.
+- Use `typeof` to check if the `window` object is defined. If it is, return the `useLayoutEffect()`. Otherwise return `useEffect()`.
 
 ```jsx
 const useIsomorphicEffect =

snippets/useMediaQuery.md

@@ -2,13 +2,13 @@
 title: useMediaQuery
 tags: hooks,state,effect,intermediate
 firstSeen: 2020-01-03T14:39:46+02:00
-lastUpdated: 2020-11-16T14:17:53+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Checks if the current environment matches a given media query and returns the appropriate value.
 
-- Check if `window` and `window.matchMedia` exist, return `whenFalse` if not (e.g. SSR environment or unsupported browser).
-- Use `window.matchMedia()` to match the given `query`, cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook.
+- Check if `window` and `window.matchMedia` exist. Return `whenFalse` if not (e.g. SSR environment or unsupported browser).
+- Use `window.matchMedia()` to match the given `query`. Cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook.
 - Use the `useEffect()` hook to add a listener for changes and to clean up the listeners after the hook is destroyed.
 - Return either `whenTrue` or `whenFalse` based on the value of `match`.
 

snippets/usePersistedState.md

@@ -2,7 +2,7 @@
 title: usePersistedState
 tags: hooks,state,effect,advanced
 firstSeen: 2020-11-29T14:16:36+02:00
-lastUpdated: 2020-11-29T14:16:36+02:00
+lastUpdated: 2021-10-13T19:29:39+02:00
 ---
 
 Returns a stateful value, persisted in `localStorage`, and a function to update it.
@@ -13,7 +13,7 @@ Returns a stateful value, persisted in `localStorage`, and a function to update
 - When the component is first mounted, use `Storage.getItem()` to update `value` if there's a stored value or `Storage.setItem()` to persist the current value.
 - When `value` is updated, use `Storage.setItem()` to store the new value.
 - When `name` is updated, use `Storage.setItem()` to create the new key, update the `nameRef` and use `Storage.removeItem()` to remove the previous key from `localStorage`.
-- **NOTE:** The hook is meant for use with primitive values (i.e. not objects) and doesn't account for changes to `localStorage` due to other code. Both of these issues can be easily handled (e.g. JSON serialization and handling the `'storage'` event).
+- **Note:** The hook is meant for use with primitive values (i.e. not objects) and doesn't account for changes to `localStorage` due to other code. Both of these issues can be easily handled (e.g. JSON serialization and handling the `'storage'` event).
 
 ```jsx
 const usePersistedState = (name, defaultValue) => {