function Hello(props) {
    return <div>Hello,{props.name}</div>
}

let elementList = [];
for (let i = 0;i<3;i++){
    elementList.push(<Hello name={i}/>);
}

let element = <div>{elementList}</div>

function Time(props){
    let now = new Date();
    now = now.toLocaleTimeString();
    return <div>{now}</div>;
}

ReactDOM.render(element,document.getElementById('root'));
ReactDOM.render(<Time/>,document.getElementById('time'));

function tick() {
    const element = <Time/>
    ReactDOM.render(element, document.getElementById('time'));
}

var interval = setInterval(tick, 1000);

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);