const messages = [
  {
    content: "Test 1",
    date: "2018-01-01"
  },
    {
    content: "Test 2",
    date: "2018-02-01"
  },
    {
    content: "Test 3",
    date: "2018-02-05"
  }
];

const Message = props => (
  React.createElement("li", {className: "list-group-item"}, props.content, " - ", React.createElement("small", null, props.date))
);

const MessageForm = props => (
  React.createElement("form", {onSubmit: (e) => props.submitHandler(e)},
    React.createElement("div", {className: "form-group"},
      React.createElement("label", null, "Message:"),
      React.createElement("textarea", {className: "form-control", row: "3"})
    ),
    React.createElement("button", {className: "btn btn-success"}, "Send")
  )
)

class MessageBox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: props.data
    }
  }

  submitHandler(e) {
    e.preventDefault();

    const textareaNode = e.target.querySelector('textarea'),
          content = textareaNode.value,
          dateObj = new Date(),
          date = `${dateObj.getFullYear()}-${dateObj.getMonth()}-${dateObj.getDate()}`;

    this.setState(prevState => {
      prevState.data.push({content, date});

      return prevState;
    });

    textareaNode.value = '';
  }

  render() {
    const messages = this.state.data.map((item, id) => React.createElement(Message, {key: id, content: item.content, date: item.date}));

    return (
      React.createElement("div", null,
        React.createElement("h2", null, "MessageBox"),
        React.createElement(MessageForm, {submitHandler: this.submitHandler.bind(this)}),
        React.createElement("ul", {className: "list-group"},
          messages
        )
      )
    )
  }
}

ReactDOM.render(
  React.createElement(MessageBox, {data: messages}),
  document.getElementById('root')
)