import React, {Component} from 'react';
import { render } from 'react-dom';

class TopBox extends Component {

  render () {
    const s = {backgroundColor:'red'};
    const all_names = this.props.all_names.map(n => {
      return (
        <p>{n}</p>
      );
    });
    return (
      <div style={s}>
        {all_names}
      </div>
    );
  }

}


class BottomBox extends Component {

  constructor() {
    super();
    this.handler = this.handler.bind(this);
  }

  handler() {
    this.props.some_function(''+Math.random());
  }

  render () {
    const s = {backgroundColor:'orange'};
    return (
      <div style={s}
           onClick={this.handler}
           >
        Click me
      </div>
    );
  }

}

class Application extends Component {


  constructor() {
    super();
    this.state = {all_names: ['hello']};
    this.add_name = this.add_name.bind(this);
  }

  add_name(item) {
    this.setState({
      all_names:[...this.state.all_names, item]
    });
  }

  render() {
    return (
      <div>
        <TopBox
          all_names={this.state.all_names}
          />
        <BottomBox
          some_function={this.add_name}
          />
      </div>
    );
  }
};



render(<Application/>,
       document.getElementById('container'));