Todo App with React, Tailwind CSS, TypeScript

Community feedback

• 

  J.D. Browne•870

  @PeshwariNaanPosted almost 2 years ago

  Hello Rizky, nice work on completing the challenge.

  Here are a couple suggestions that might help make the app a little better.

  • You don't want the user to create an empty todo (no text). Make sure to add a check in the submit handler that looks for an empty field like this:

  if (task === '') return;
  

  • In the input component, don't give the user the option to mark the todo as completed. If a task is already completed then no one is going to put it in a list of things to do. In my app I used the circle on the side to clear the input field. You can see my solution HERE if you want to check it out.

  • Something is going on when a task is entered and the entire page is reloading which should not happen when using React. Only the components that have changed should re-render. If you are using React dev tools, you should be able to track down the problem. This article is pretty good for learning how to use the DEV-TOOLS

  • The 'clear completed' button will clear all the todos in your app, not just the completed ones. Wherever it is that you are managing your state, you could add a filter function. Maybe something like:

      //Clear out all finished todos
    const clearCompleted = () => {
      const updatedTodoList = state.todoItems.filter((todo) => !todo.isDone);
      return updatedTodoList;
    };
  

  I hope this is helpful - Happy coding 😁

  Marked as helpful

  1

  ---

  

  Rizky Ardiansyah•160

  @arudiansahaPosted almost 2 years ago

  @PeshwariNaan Thank you for the kindness, and I try to implement what you suggest :D

  0