TodoList = React.createClass
  render: ->
    that = this
    createItem = (itemText) ->
      reactKup (k) ->
        k.li itemText
    reactKup (k) ->
      k.ul that.props.items.map createItem
TodoApp = React.createClass
  getInitialState: ->
    items: ['Buy Milk', 'Buy Sugar']
    text: 'Add #3'
  onChange: (e) ->
    this.setState({text: e.target.value})
  handleSubmit: (e) ->
    e.preventDefault()
    nextItems = this.state.items.concat([this.state.text])
    nextText = ''
    this.setState({items: nextItems, text: nextText})
  render: ->
    that = this
    reactKup (k) ->
      k.div ->
        k.h3 'TODO'
        k.build TodoList,
          items: that.state.items
        k.form {
          onSubmit: that.handleSubmit
        }, ->
          k.input
            onChange: that.onChange
            value: that.state.text
          k.button "Add ##{that.state.items.length + 1}"