choo-nested-components.js

const view = (state, prev, send) => {
  return html`
    <div onload=${()=> send('getTodos')}>
      <form onsubmit=${onSubmit}>
        <input type="text" placeholder="New item" id="title">
      </form>
      ${ TodoList({ todos: state.todos }, send) }
    </div>`

  function onSubmit (e) {
    const input = e.target.children[0]
    send('addTodo', { title: input.value })
    input.value = ''
    e.preventDefault()
  }
}

const TodoList = (props, send)=> {
  const todos = props.todos

  return html`
    <ul>
      ${todos.map((todo, index)=> {
        return Todo({ todo: todo, index: index }, send)
      })}
    </ul>
  `
}

const Todo = (props, send)=> {
  const todo = props.todo
  const index = props.index

  return html`
    <li>
      <input
        type="checkbox"
        ${todo.completed ? 'checked' : ''}
        onchange=${(e)=> onChange(e, index)}
      />
      ${todo.title}
    </li>
  `

  function onChange(e, index) {
    const updates = { completed: e.target.checked }
    send('updateTodo', { index: index, updates: updates })
  }
}