opendevs logo

useEffect to set timer

Solidify your knowledge of Component Lifecycle Phases by solving this problem.
useEffect to update DOM

Dogendar 🐶 is special and so is his stopwatch. Instead of counting time every one second, his stopwatch count time every 3 seconds so it goes like 0 (initially), 1 (after 3 seconds), 2 (after another 3 seconds) and so on. He decides to write a React component SpecialStopwatch that mimics his special stopwatch. Dogendar knows that he can perform things in continuous intervals using setInterval function of JavaScript.

The component takes two props currentTime and incrementTime. currentTime is the current time in stopwatch and incrementTime is a function that can be used to increment the time in stopwatch by 1. It is implemented as

const incrementTime = () => { currentTime = currentTime + 1 }

Help Dogendar finish the component and fulfil these requirements:

  • Show current time in the exact format Stopwatch: {currentTime} (case-sensitive)
  • Call incrementTime function every 3 seconds to update the time

Keep in mind that since currentTime is a prop, the component will rerender everytime you update time using incrementTime and latest currentTime will be passed as prop.

Solve this medium problem to earn  2  DevCoin image
Coding Area
opendevs logo
CoursesFAQsContact UsPrivacy PolicyTerms Of Service
Copyright © 2023 opendevs
Learn ● Develop ● Ace
All illustrations by Storyset