import * as React from "react";
import { ToDoData } from "./TodoData";

export const Todo = () => {
  const [items, setItems] = React.useState([
    new ToDoData("Learn JavaScript"),
    new ToDoData("Learn React"),
    new ToDoData("Get some good sleep")
  ]);

  return (
    <div className="panel">
      <div className="panel-heading">
        <span>⚛</span>️ React ToDo
      </div>
      {items.map((item) => (
        <label key={item.key} className="panel-block">
          <input type="checkbox" />
          {item.text}
        </label>
      ))}
      <div className="panel-block">{items.length} items</div>
    </div>
  );
};
import * as React from "react";
import { TodoData } from "./TodoData";
import { TodoItem } from "./TodoItem";

export const Todo = () => {
  const [items, setItems] = React.useState([
    new TodoData("Learn JavaScript"),
    new TodoData("Learn React"),
    new TodoData("Get some good sleep")
  ]);

  const onCheck = (item: TodoData, checked: boolean) => {
    // 該当するitemを更新
    const newItems = items.map((value) => {
      if (value.key !== item.key) return value;
      return new TodoData(value.text, checked);
    });
    setItems(newItems);
  };

  return (
    <div className="panel">
      <div className="panel-heading">
        <span>⚛</span>️ React ToDo
      </div>
      {items.map((item) => (
        <TodoItem key={item.key} item={item} onCheck={onCheck} />
      ))}
      <div className="panel-block">{items.length} items</div>
    </div>
  );
};

import * as React from "react";
import { TodoList } from "./TodoList";
import { TodoData } from "./TodoData";
import { Input } from "./Input";

export const Todo = () => {
  const [items, setItems] = React.useState([
    new TodoData("Learn JavaScript"),
    new TodoData("Learn React"),
    new TodoData("Get some good sleep")
  ]);

  const onCheck = (item: TodoData, checked: boolean) => {
    // 該当するitemを更新
    const newItems = items.map((value) => {
      if (value.key !== item.key) return value;
      return new TodoData(value.text, checked);
    });
    setItems(newItems);
  };

  const onAdd = (text: string) => setItems([...items, new TodoData(text)]);

  return (
    <div className="panel">
      <div className="panel-heading">
        <span>⚛</span>️ React ToDo
      </div>
      <Input onAdd={onAdd} />
      <TodoList items={items} onCheck={onCheck} />
    </div>
  );
};