File size: 874 Bytes
ca056f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React, { useState } from "react";
import Todo from "./Todo";
type TodoListProps = {
todos: Todo[];
};
const TodoList: React.FC<TodoListProps> = ({ todos }) => {
const [todos, setTodos] = useState([]);
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.target as HTMLFormElement);
const text = formData.get("text") as string;
setTodos([...todos, { id: todos.length + 1, text, completed: false }]);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="text" placeholder="Add a todo" />
<button type="submit">Add</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<Todo {...todo} />
</li>
))}
</ul>
</div>
);
};
export default TodoList; |