Update snippets

Resolves #112

snippets/CountDown.md

@@ -5,71 +5,51 @@ tags: components,state,advanced
 
 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.
+- 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.
-- 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 the the `useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to clean up when the component is unmounted.
+- Use `String.prototype.padStart()` to pad each part of the time array to two characters to create the visual representation of the timer.
 
 ```jsx
 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({
-    hours: parseInt(hours),
-    minutes: parseInt(minutes),
-    seconds: parseInt(seconds)
-  });
+  const [[h, m, s], setTime] = React.useState([hours, minutes, seconds]);
 
   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) {
-      setTime({
-        hours: time.hours - 1,
-        minutes: 59,
-        seconds: 59
-      });
-    } else if (time.seconds == 0) {
-      setTime({
-        hours: time.hours,
-        minutes: time.minutes - 1,
-        seconds: 59
-      });
+    if (h === 0 && m === 0 && s === 0) setOver(true);
+    else if (m === 0 && s === 0) {
+      setTime([h - 1, 59, 59]);
+    } else if (s == 0) {
+      setTime([h, m - 1, 59]);
     } else {
-      setTime({
-        hours: time.hours,
-        minutes: time.minutes,
-        seconds: time.seconds - 1
-      });
+      setTime([h, m, s - 1]);
     }
   };
 
   const reset = () => {
-    setTime({
-      hours: parseInt(hours),
-      minutes: parseInt(minutes),
-      seconds: parseInt(seconds)
-    });
+    setTime([parseInt(hours), parseInt(minutes), parseInt(seconds)]);
     setPaused(false);
     setOver(false);
   };
 
   React.useEffect(() => {
-    let timerID = setInterval(() => tick(), 1000);
+    const timerID = setInterval(() => tick(), 1000);
     return () => clearInterval(timerID);
   });
 
   return (
     <div>
-      <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes
+      <p>{`${h.toString().padStart(2, '0')}:${m
         .toString()
-        .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>
+        .padStart(2, '0')}:${s.toString().padStart(2, '0')}`}</p>
       <div>{over ? "Time's up!" : ''}</div>
-      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>
+      <button onClick={() => setPaused(!paused)}>
+        {paused ? 'Resume' : 'Pause'}
+      </button>
       <button onClick={() => reset()}>Restart</button>
     </div>
   );
@@ -77,5 +57,8 @@ const CountDown = ({ hours = 0, minutes = 0, seconds = 0 }) => {
 ```
 
 ```jsx
-ReactDOM.render(<CountDown hours="1" minutes="45" />, document.getElementById('root'));
+ReactDOM.render(
+  <CountDown hours={1} minutes={45} />,
+  document.getElementById('root')
+);
 ```