import React from 'react';

import ReactDOM from 'react-dom';

function Clock(props){

    return(

        <div>

            <h1>Hello, world!</h1>

            <h2>It is {props.date.toLocaleTimeString()}.</h2>

        </div>

    );

}

function tick() {

    ReactDOM.render(

        <Clock date={new Date()}/>,

        document.getElementById('root')

    );

}

setInterval(tick, );

import React from 'react';

import ReactDOM from 'react-dom';

class Clock extends React.Component {

    render() {

      return (

        <div>

          <h1>Hello, world!</h1>

          <h2>It is {this.props.date.toLocaleTimeString()}.</h2>

        </div>

      );

    }

  }

function tick() {

    ReactDOM.render(

        <Clock date={new Date()}/>,

        document.getElementById('root')

    );

}

  setInterval(tick, );

import React from 'react';

import ReactDOM from 'react-dom';

function FormattedDate(props) {

    return <h2>It is {props.date.toLocaleTimeString()}.</h2>;

}

class Clock extends React.Component {

    constructor(props) {

      super(props);

      this.state = {date: new Date()};

    }

    componentDidMount() {

      this.timerID = setInterval(

        () => this.tick(),

      );

    }

    componentWillUnmount() {

      clearInterval(this.timerID);

    }

    tick() {

      this.setState({

        date: new Date()

      });

    }

    render() {

      return (

        <div>

          <h1>Hello, world!</h1>

          <FormattedDate date={this.state.date} />

        </div>

      );

    }

  }

class App extends React.Component {

    render(){

        return (

            <div>

              <Clock />

              <Clock />

              <Clock />

            </div>

          );

    }

}

ReactDOM.render(

    <App />,

    document.getElementById('root')

);