import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: []};
  },handleAdd: function() {
    var newItem = this.refs.newItem.value;
    if (newItem.length == 0) {
      return;
    }
    this.refs.newItem.value = "";
    this.refs.newItem.focus();
    this.setState({items: this.state.items.concat(newItem)});
  },render: function() {
    return (
      <div>
        <h2>Todo List</h2>
        <ul>
        {
          this.state.items.map(function(item) {
            return <li>{item}</li>
          })
        }
        </ul>
        <input type="text" ref="newItem" />
        <input type="button"
          value={'Add #' + (this.state.items.length + 1)}
          onClick={this.handleAdd}>
        </input>
      </div>
    )
  },});

var TodoApp = React.createClass({
  render: function() {
    return (
      <TodoList />
    );
  }
})

ReactDOM.render(
  <TodoApp />,document.getElementById('root')
);