Clock items

index-clock.js

const React = require("react");
const { render } = require("react-dom");

const root = document.querySelector("#r");

// const log = (text) => {
//   document.querySelector("#log").textContent += "\n" + text;
// }

// const heavyCalc = () => {
//   const start = Date.now();
//   while (Date.now() - start < 200) { }
// }

class Items extends React.Component {
  render() {
    const num = this.props.items ? this.props.items.length : 0;
    return (
      <div>
        <h2>items</h2>
        <p>got {num} items</p>
      </div>
    )
  }
}

class Clock extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      unix: Date.now(),
    }
    this.refreshClock = this.refreshClock.bind(this);
  }
  
  componentDidMount() {
    setTimeout(this.refreshClock, 1000)
  }
  
  refreshClock() {
    this.setState({
      unix: Date.now(),
    })
    setTimeout(this.refreshClock, 1000)
  }
  
  render() {
    return (
      <div style={{padding: "20px"}}>
        <h1>unix timestamp is now: {this.state.unix}</h1>
        <Items />
      </div>
    )
  }
}


// render(<Clock items={[1, 2]} />, root);
render(<Clock />, root);