react1-week3/Viki #289
react1-week3/Viki #289
Conversation
There was a problem hiding this comment.
@VictoriaDem17 Heey, The app is beautiful as always 👏 Great job! I have found some issues related to functionality, please look into it. Thank you!
| @@ -0,0 +1,81 @@ | |||
| import { v4 as uuidv4 } from "uuid"; | |||
| import TodoList from "./components/TodoList"; | ||
| import Form from "./components/Form"; | ||
| import Header from "./components/Header"; | ||
| import Timer from "./components/Timer"; |
There was a problem hiding this comment.
Hey @VictoriaDem17, The app is crashing right now due to a mismatch between file names for Form, TodoList, and Header. Please fix the file names :) (All of them should be capitalized)
|
|
||
| const TodoList = ({ todos, setTodos, setEditTodo }) => { | ||
| const handleComplete = ({ id }) => { | ||
| setTodos( |
There was a problem hiding this comment.
Although it's not wrong but its better to use the parameter from setter directly, to ensure the data stay consists
The same applies for all methods :)
setTodos(prevTodos => prevTodos.map ... )
| "https://gist.githubusercontent.com/benna100/391eee7a119b50bd2c5960ab51622532/raw" | ||
| ) | ||
| .then((res) => res.json()) | ||
| .then((data) => setTodos(data)); |
|
|
||
| return ( | ||
| <div> | ||
| {todos.length === 0 ? ( |
There was a problem hiding this comment.
this is ok, but I think you can choose more readable approach
if(todos.length === 0) return null
return (
<div> {todos.map... }..... </div>)
|
|
||
| useEffect(() => { | ||
| if (editTodo) { | ||
| setInput(editTodo.description, editTodo.deadline); |
There was a problem hiding this comment.
this wont work, setter takes only one argument, you are passing to
| editTodo, | ||
| setEditTodo, | ||
| }) => { | ||
| const updateTodo = (description, id, completed, deadline) => { |
There was a problem hiding this comment.
The update logic is broken right now, please look into it
Screen.Recording.2024-04-14.at.15.12.17.mov
| /> | ||
| <input | ||
| type="date" | ||
| className="deadline-input" |
There was a problem hiding this comment.
you can set minValue for date to prevent selecting the dates in the past
No description provided.