>Hello, I'm

Eric Kei.

_

1import React, { useState } from 'react';
2import './App.css';
3
4function App() {
5  const [inputValue, setInputValue] = useState("");
6  const [todos, setTodos] = useState<Todo[]>([]);
7
8  type Todo = {
9    inputValue: string;
10    id: number;
11    checked: boolean;
12  };
13
14  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
15    setInputValue(e.target.value);
16  };
17
18  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
19    e.preventDefault();
20
21    const newTodo: Todo = {
22      inputValue: inputValue,
23      id: todos.length,
24      checked: false,
25    };
26
27    setTodos([newTodo, ...todos]);
28    setInputValue("");
29  };
30
31  const handleEdit = (id: number, inputValue: string) => {
32    const newTodos = todos.map((todo) => {
33      if (todo.id === id) {
34        todo.inputValue = inputValue;
35      }
36      return todo;
37    });
38    setTodos(newTodos);
39  };
40
41  const handleChecked = (id: number, checked: Boolean) => {
42    const newTodos = todos.map((todo) => {
43      if (todo.id === id) {
44        todo.checked = !checked;
45      }
46      return todo;
47    });
48    setTodos(newTodos);
49  };
50
51  const handleDelete = (id: number) => {
52    const newTodos = todos.filter((todo) => todo.id !== id);
53    setTodos(newTodos);
54  };
55
56  return (
57    <div className="App">
58      <div>
59        <h2>Todoリスト with Typescript</h2>
60        <form onSubmit={(e) => handleSubmit(e)}>
61          <input type="text" onChange={(e) => handleChange(e)} className="inputText" />
62          <input type="submit" value="作成" className="submitButton" />
63        </form>
64        <ul className="todoList">
65          {todos.map((todo) => (
66            <li key={todo.id}>
67              <input
68                type="text"
69                onChange={(e) => handleEdit(todo.id, e.target.value)}
70                className="inputText"
71                value={todo.inputValue}
72                disabled={todo.checked}
73              />
74              <input
75                type="checkbox"
76                onChange={(e) => handleChecked(todo.id, todo.checked)}
77              />
78              <button onClick={() => handleDelete(todo.id)}>消</button>
79            </li>
80          ))}
81        </ul>
82      </div>
83    </div>
84  );
85}
86
87export default App;