- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
Create a Clock component updating the time every second.
- use class component
- start the timer only when the component is added to the page
Watch this video to solve the next tasks
- Add buttons
Show Clock
andHide Clock
in the App changingisClockVisible
variable in theApp
state. - The
Clock
should not be rendered whenisClockVisible
isfalse
. - Change the
Clock
component to print the time not only on the page but also in theDevTools
console.- Stop the timer when the
Clock
is hidden.
- Stop the timer when the
- Check if it works correctly:
- Hide and show the
Clock
several times and leave it visible - The time in the console should be printed only once each second
- Hide and show the
- Add
Set random name
button to theApp
to set a random number as aclockName
variable in theApp
state. - Pass the name to the
<Clock name={this.state.clockName} />
- Every time the
name
changes print a message in the consoleThe Clock was renamed from oldName to newName
.- Check if the message appears in the console between clock ticks