https://i-doctor.sakura.ne.jp/web/doku.php?id=stencil:01.stencilでtodoアプリ

src_components_app-home_app-home.tsx

import { Component, State, Listen } from '@stencil/core';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css'
})
export class AppHome {
  @State() todos: any;
  @State() newTodo;

  componentWillLoad() {
    this.todos = [{ id: 1, value: 2 }];
  }

  render() {
    return (
      <div>
        <input onChange={e => this.updateNewTodo(e.target)}/>

        <ul>
          {this.todos.map((todo) => {
            return <my-todo
              value={todo.value}
              id={todo.id}></my-todo>
          })}
        </ul>
      </div>
    );
  }
  
  updateNewTodo(newTodo) {
    this.todos = [...this.todos, { id: Date.now(), value: newTodo.value }];
  }

}