|
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; |