first solution with issues #846
Conversation
src/App.tsx
Outdated
| return visible; | ||
| }; | ||
|
|
||
| const handleSubmit = (event: { preventDefault: () => void }) => { |
There was a problem hiding this comment.
try to use Event type: https://bobbyhadz.com/blog/typescript-react-onsubmit-event-type
There was a problem hiding this comment.
I think you should consider splitting your component's logic into multiple custom hooks - App component grew really big, since you're passing a lot of functions and states to children components, maybe consider global state with context? 🤔
that't not mandatory, but I think it would be a nice practice
| type FooterProps = { | ||
| counter: number; | ||
| filter: Filter; | ||
| setFilter: (filter: Filter) => void; |
There was a problem hiding this comment.
you can copy type of setState function, when you hover over that function in VSC, it will be more specific than void
src/components/Item/TodoItem.tsx
Outdated
| const handleBlur = () => { | ||
| setIsEditing(false); | ||
| }; |
There was a problem hiding this comment.
On blur we should:
- Do nothing only when title has not changed.
- Update title when it has changed
- Remove Todo when title left empty
This logic is missing here
src/components/Item/TodoItem.tsx
Outdated
| <button | ||
| type="button" | ||
| className="todo__remove" | ||
| data-cy="TodoDelete" | ||
| onClick={() => handleDelete(todo.id)} | ||
| > | ||
| × | ||
| </button> |
There was a problem hiding this comment.
Should be hidden when isEditing is true
DEMO LINK