rebSen
10/10/2018 - 1:52 PM

Clock.css

h1 {
    margin-top:20%;
}

.clock {
    position: absolute; 
    text-align: center;
    width: 100%;
    height: 100%;
    background: #00FF00;
}
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import './Clock.css';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  componentDidMount() {
    setInterval( () => this.addOne(), 1000);
  }

  addOne (){
    this.setState({
      count: this.state.count + 1
    })  
  }

  componentDidUpdate() {
    console.log('un update a eu lieu') 
  }
     
  render() {
    
    return (
      <div className="clock">
        <h1>The world (or my head ?) will explode in : </h1>
        <h2>{this.state.count} seconds !</h2>
      </div>
    )
  }
}

export default Clock;