import React, { Component } from 'react';
import moment from 'moment';

class ChatItems extends Component {

  constructor(props){
    super(props);
    this.state = {date: moment(new Date(Date.now())).format()}
  }

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

  tick() {
    this.setState((prevState) => ({
      date: moment(this.state.date).fromNow()
    }));
  }

  render() {
    return (
      <div>
        <ul>
          {this.props.listitems.map(item => (
            <li key={item.id}>{this.state.date}: {item.text}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ChatItems;