React Clock

Create a class component Clock updating the time every second using a given markup. Time should be printed on the page and in the DevTools console.

  1. start the timer only when the component is added to the page (componentDidMount)
  2. update time every second using setInterval.
  3. Change the App to be a class components
  4. add hasClock variable to the App state.
  5. the Clock should be visible only when hasClock is true.
  6. hide the clock on right mouse click in the document (contextmenu event) 
    document.addEventListener('contextmenu', () => {});
  7. show the clock on left mouse click in the document (click event) 
    document.addEventListener('click', () => {});
  8. check if timer stops in the console when it is hidden (componentWillUnmount)
  9. add clockName to the App state using getRandomName function (already implemented)
  10. pass it to the Clock to be show near the time (see the markup) 
    <Clock name={this.state.clockName} />
  11. update clockName every 3300ms with a new random name (use setInterval)
  12. every time the name changes the Clock must print a message with an old name and a new name to the console (componentDidUpdate) 
    Renamed from <oldName> to <newName>
  13. check in the console that a renaming message occurs after each 3-4 time messages

Instructions