Now that we have covered the component's basics, it's time to implement the countdown effectively. For that, we need to use a React hook called useState.

It is called within the functional component to update and consume the component state. The state represents the component's current state. The useState returns a pair: the current state value and a function to update it.

1. First, we need to import a few functions and types to continue. Inside the Countdown component, import the following:

   
   

   _10

   //react/Countdown.tsx

   _10

   import React, { useState } from 'react'

   _10

   import { TimeSplit } from './typings/global'

   _10

   import { tick, getTwoDaysFromNow } from './utils/time'

   
   

   The getTwoDaysFromNow function will be used to handle edge cases. This step will explain it later.

2. Next step is to add the state update hook (useState):

   
   

   _14

   //react/Countdown.tsx

   _14

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate }) => {

   _14

   + const [timeRemaining, setTime] = useState<TimeSplit>({

   _14

   + hours: '00',

   _14

   + minutes: '00',

   _14

   + seconds: '00'

   _14

   + })

   _14

   _14

   return (

   _14

   <div>

   _14

   { targetDate }

   _14

   </div>

   _14

   )

   _14

   }

   
   

3. After doing that, we'll add a default constant targetDate for the edge case where the prop is not defined. We'll use as a fallback a date defined as two days from the current date. This date is calculated using a util function that was previously imported from the /utils folder.

   
   

   _10

   //react/Countdown.tsx

   _10

   const DEFAULT_TARGET_DATE = getTwoDaysFromNow()

   
   

4. Now, we need to add the tick function and the DEFAULT_TARGET_DATE constant to make the countdown work:

   
   

   _16

   //react/Countdown.tsx

   _16

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate = DEFAULT_TARGET_DATE }) => {

   _16

   const [timeRemaining, setTime] = useState<TimeSplit>({

   _16

   hours: '00',

   _16

   minutes: '00',

   _16

   seconds: '00'

   _16

   })

   _16

   _16

   + tick(targetDate, setTime)

   _16

   _16

   return (

   _16

   <div>

   _16

   { targetDate }

   _16

   </div>

   _16

   )

   _16

   }

   
   

5. Last but not least, change the h1 so that it shows the countdown that we've created. For that, we need to use the timeRemaining current state:

   
   

   _17

   //react/Countdown.tsx

   _17

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate = DEFAULT_TARGET_DATE }) => {

   _17

   const [timeRemaining, setTime] = useState<TimeSplit>({

   _17

   hours: '00',

   _17

   minutes: '00',

   _17

   seconds: '00'

   _17

   })

   _17

   _17

   tick(targetDate, setTime)

   _17

   _17

   return (

   _17

   <div>

   _17

   - <h1>{ targetDate }</h1>

   _17

   + <h1>{ `${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}` }</h1>

   _17

   </div>

   _17

   )

   _17

   }

   
   

The countdown string formatting is in a HH:MM:SS format, made through an hours, minutes, and seconds splitting.

Therefore, with these changes, we'll see a real-time update of the countdown! The result on the homepage is this: