import React from 'react';
import ReactDOM from 'react-dom';

class TableRow extends React.Component{
  render(){
    return (<div>
      {this.props.text}
    </div>)
  }
}

class TableWrapper extends React.Component{
  render(){
    return (<div>
      <TableRow text={"Row one"}/>
      <TableRow text={"Row two"}/>
      <TableRowTimeout />
    </div>)
  }
}

class TableRowTimeout extends React.Component{
  constructor(props){
    super(props)
    this.state={
      text: "Loaded component"
    }
  }

  componentDidMount(){
    this.intervalId = setInterval( () => {
      this.setState({
        text: "Timeout"
      })
    }, 2000);
  }

  render(){
    return (<div>
      {this.state.text}
    </div>)
  }
}

class App extends React.Component{
  render(){
    return <TableWrapper/>
  }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App />,
        document.getElementById('app')
    );
});