AddTodo.tsx

1 todo

-Validate max length and show character countL26

Annotations (2)

@gitianAddTodo form — controlled input with submit-on-enter and button clickL7

AddTodo form — controlled input with submit-on-enter and button click

tsxL8–10

8 export function AddTodo({ onAdd }: AddTodoProps) {
9   const [text, setText] = useState("");
10

@gitianForm submission — prevents default, trims whitespace, calls the parent's addTodo, and resets the input. The guard clause prevents adding empty todos.L11

Form submission — prevents default, trims whitespace, calls the parent's addTodo, and resets the input. The guard clause prevents adding empty todos.

tsxL16–22

16   function handleSubmit(e: React.FormEvent) {
17     e.preventDefault();
18     const trimmed = text.trim();
19     if (!trimmed) return;
20     onAdd(trimmed);
21     setText("");
22   }

8	export function AddTodo({ onAdd }: AddTodoProps) {
9	const [text, setText] = useState("");
10

16	function handleSubmit(e: React.FormEvent) {
17	e.preventDefault();
18	const trimmed = text.trim();
19	if (!trimmed) return;
20	onAdd(trimmed);
21	setText("");
22	}