opendevs
useEffect to update DOM

useEffect to set timer

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.


Difficulty

medium

Solve the practice problems to earn    DevCoin image 
Coding Area
Output

Copyright © 2022 opendevs

Learn ● Develop ● Ace
All illustrations by Storyset