todo.c | Command line lightweight todo tool with readable storage

Your guess is correct! You should modify the line that allow the user to pick an option.

So, your code:

You could define an auxiliary filteredTodo state to store the filtered todos.
Then, declare a filterTodos function to filter the list based on the clicked button:

Your spec says:

You could just change the class of your list (the

not the
• ) and let CSS casscading take care of the rest. .forEach() is definitely not needed nor any array or NodeList for that matter. Also, you should always have a default in a switch() -- in this example default removes both classes from
  (it doesn't matter if class is actually there or not so covering both is 100% no calculations involved). BTW, "click" is ok in this situation, but you should use "change" event since it's designed for form controls like . const form = document.forms[0]; const select = form.elements.filter; select.addEventListener('change', filterList); function filterList(e) { const select = e.target; const list = document.querySelector('.list'); if (select.matches('#filter')) { switch (select.value) { case 'done': list.classList.remove('open'); list.classList.add('done'); break; case 'open': list.classList.remove('done'); list.classList.add('open'); break; default: list.classList.remove('done'); list.classList.remove('open'); break; } } }; li.open::before { content: '⬛' } li.done::before { content: '☑️' } .list.open li.done { display: none } .list.done li.open { display: none } All Completed Uncompleted
  • Task
  • Task
  • Task
  • Task
  • Task
  • Task
  • Task
  • Task
  • Task

Your button state is dependent on input (the variable set by setInput) and todos. So the best way to handle this is via an useEffect with a dependency array.

This'll satisfy the immediate need:

I fixed pagination with filter with the help of useMemo hook. The problem was that i was filtering the default array and i wasn't updating the totalTodos with the length of computed todos etc.. Now inside useMemo hook, i compute(filter) the todos first and then i update totalTodos with the length of computed todos.

If you want queryParameters.get(assignee.name); to return a list, you can include the parameter more than once in the URL

http://localhost:9090/hello-todo/api/v1/todo/list?assignee.name=name1&assignee.name=name2

Or you can continue to have a single parameter (list?assignee.name=name1,name2) and split on ,, but you have to write the code to do that, and consider what to do when one of your names has a , character in it.

Problem was on the child component