diff --git a/snippets/Accordion.md b/snippets/Accordion.md index 51154f6cd..5948fc5ef 100644 --- a/snippets/Accordion.md +++ b/snippets/Accordion.md @@ -5,15 +5,15 @@ tags: components,children,state,advanced 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 `
- {props.children} + {children}
); -} +}; -function Accordion(props) { - const [bindIndex, setBindIndex] = React.useState(props.defaultIndex); +const Accordion = ({ defaultIndex, onItemClick, children }) => { + const [bindIndex, setBindIndex] = React.useState(defaultIndex); const changeItem = itemIndex => { - if (typeof props.onItemClick === 'function') props.onItemClick(itemIndex); + if (typeof onItemClick === 'function') onItemClick(itemIndex); if (itemIndex !== bindIndex) setBindIndex(itemIndex); }; - const items = props.children.filter(item => item.type.name === 'AccordionItem'); + const items = children.filter(item => item.type.name === 'AccordionItem'); return (
@@ -64,7 +64,7 @@ function Accordion(props) { ))}
); -} +}; ``` ```jsx diff --git a/snippets/Alert.md b/snippets/Alert.md index e5edcee2e..4f867ba85 100644 --- a/snippets/Alert.md +++ b/snippets/Alert.md @@ -1,15 +1,15 @@ --- title: Alert -tags: components,beginner,state,effect +tags: components,state,effect,beginner --- Creates an alert component with `type` prop. - Define appropriate CSS styles and animations for the component's elements. -- Use the `React.setState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`. +- Use the `React.useState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`. - Define `timeoutId` to keep the timer instance for clearing on component unmount. -- Use the `React.setEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted. -- Define `closeNotification` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`. +- Use the `React.useEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted. +- Define `closeAlert` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`. - Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM. ```css @@ -64,36 +64,36 @@ Creates an alert component with `type` prop. ``` ```jsx -function Notification(props) { - const [isShown, setIsShown] = React.useState(false); - const [isLeaving, setIsLeaving] = React.useState(false); +const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => { + const [isShown, setIsShown] = React.useState(isDefaultShown); + const [isLeaving, setIsLeaving] = React.useState(false); - let timeoutId = null; + let timeoutId = null; - React.useEffect(() => { - setIsShown(true); - return () => { - clearTimeout(timeoutId); - } - }, [props.isShown, props.timeout, timeoutId]); + React.useEffect(() => { + setIsShown(true); + return () => { + clearTimeout(timeoutId); + }; + }, [isDefaultShown, timeout, timeoutId]); - const closeNotification = () => { - setIsLeaving(true); - timeoutId = setTimeout(() => { - setIsLeaving(false); - setIsShown(false); - }, 250) - } + const closeAlert = () => { + setIsLeaving(true); + timeoutId = setTimeout(() => { + setIsLeaving(false); + setIsShown(false); + }, timeout); + }; - return isShown && ( -
-
- ) -} + return isShown && ( +
+
+ ); +}; ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); ``` diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index 70f077b93..a7785c6b3 100644 --- a/snippets/AutoLink.md +++ b/snippets/AutoLink.md @@ -9,7 +9,7 @@ Renders a string as plaintext, with URLs converted to appropriate `` elements - Return a `` with matched URLs rendered as `` 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 }) { })} ); -} +}; ``` ```jsx diff --git a/snippets/Carousel.md b/snippets/Carousel.md index f9c585090..6be833ddf 100644 --- a/snippets/Carousel.md +++ b/snippets/Carousel.md @@ -12,7 +12,7 @@ Renders a carousel component. - Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles. ```jsx -function Carousel(props) { +const Carousel = ({ carouselItems, ...rest }) => { const [active, setActive] = React.useState(0); let scrollInterval = null; const style = { @@ -29,12 +29,11 @@ function Carousel(props) { }; React.useEffect(() => { scrollInterval = setTimeout(() => { - const { carouselItems } = props; setActive((active + 1) % carouselItems.length); }, 2000); return () => clearTimeout(scrollInterval); }); - const { carouselItems, ...rest } = props; + return (
{carouselItems.map((item, index) => { @@ -49,7 +48,7 @@ function Carousel(props) { })}
); -} +}; ``` ```jsx diff --git a/snippets/Collapse.md b/snippets/Collapse.md index e182ca6da..58355fdf4 100644 --- a/snippets/Collapse.md +++ b/snippets/Collapse.md @@ -5,15 +5,15 @@ tags: components,children,state,intermediate 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 the `React.useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`. - Use an object, `style`, to hold the styles for individual components and their states. -- Use a `
` to wrap both the `
); -} +}; ``` ```jsx diff --git a/snippets/ControlledInput.md b/snippets/ControlledInput.md index 46a5562f8..dcf1488d4 100644 --- a/snippets/ControlledInput.md +++ b/snippets/ControlledInput.md @@ -6,19 +6,19 @@ tags: components,state,effect,intermediate Renders an `` 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 `` 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 `` 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 diff --git a/snippets/CountDown.md b/snippets/CountDown.md index e8a517d6d..f7fce6729 100644 --- a/snippets/CountDown.md +++ b/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 }) { ); -} +}; ``` ```jsx diff --git a/snippets/DataList.md b/snippets/DataList.md index 61efad250..c52caaa51 100644 --- a/snippets/DataList.md +++ b/snippets/DataList.md @@ -6,14 +6,14 @@ tags: components,array,beginner Renders a list of elements from an array of primitives. - Use the value of the `isOrdered` prop to conditionally render a `
    ` or `
      ` list. -- Use `Array.prototype.map` to render every item in `data` as a `
    • ` element, give it a `key` produced from the concatenation of the its index and value. +- Use `Array.prototype.map()` to render every item in `data` as a `
    • ` element, give it a `key` produced from the concatenation of the its index and value. - Omit the `isOrdered` prop to render a `
        ` list by default. ```jsx -function DataList({ isOrdered, data }) { +const DataList = ({ isOrdered, data }) => { const list = data.map((val, i) =>
      • {val}
        • ); return isOrdered ?
          {list}
        :
          {list}
        ; -} +}; ``` ```jsx diff --git a/snippets/DataTable.md b/snippets/DataTable.md index 1ff0dc8a6..04fbbd893 100644 --- a/snippets/DataTable.md +++ b/snippets/DataTable.md @@ -6,10 +6,10 @@ tags: components,array,beginner Renders a table with rows dynamically created from an array of primitives. - Render a `` element with two columns (`ID` and `Value`). -- Use `Array.prototype.map` to render every item in `data` as a `` element, consisting of its index and value, give it a `key` produced from the concatenation of the two. +- Use `Array.prototype.map()` to render every item in `data` as a `` 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 (
        @@ -28,7 +28,7 @@ function DataTable({ data }) {
        ); -} +}; ``` ```jsx diff --git a/snippets/FileDrop.md b/snippets/FileDrop.md index 8660cff80..4a8451bb1 100644 --- a/snippets/FileDrop.md +++ b/snippets/FileDrop.md @@ -10,7 +10,7 @@ Renders a file drag and drop component for a single file. 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`. +- `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`. - Return an appropriately styled `
        ` and use `drag` and `filename` to determine its contents and style. - Finally, bind the `ref` of the created `
        ` to `dropRef`. @@ -34,7 +34,7 @@ Renders a file drag and drop component for a single file. ``` ```jsx -function FileDrop(props) { +const FileDrop = ({ onDrop }) => { const [drag, setDrag] = React.useState(false); const [filename, setFilename] = React.useState(''); let dropRef = React.createRef(); @@ -64,7 +64,7 @@ function FileDrop(props) { e.stopPropagation(); setDrag(false); if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { - props.handleDrop(e.dataTransfer.files[0]); + onDrop(e.dataTransfer.files[0]); setFilename(e.dataTransfer.files[0].name); e.dataTransfer.clearData(); dragCounter = 0; @@ -93,9 +93,9 @@ function FileDrop(props) { {filename && !drag ?
        {filename}
        :
        Drop files here!
        }
        ); -} +}; ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); ``` diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md index 0d3ddbbf4..d7689b864 100644 --- a/snippets/LimitedTextarea.md +++ b/snippets/LimitedTextarea.md @@ -11,7 +11,7 @@ Renders a textarea component with a character limit. - Use a`
        ` to wrap both the`