how do I output the filtered todo list in React TypeScript

Question

It is console logging the right array out all the time, but the point here is that it should be outputting that in the 'TodoList.tsx'. Not sure how to get that fixed in this case. Anyone who could help me with this. To see the bigger picture, please click on this link:

Link to codesandbox todo

I want the returned value from App.js currentFilter function pass it to TodoListItem.js , so it will update the map function constantly when user clicks on filter buttons.

 // TodoFilter import React from 'react'; interface TodoListFilter { currentFilter: CurrentFilter; } export const TodoFilter: React.FC<TodoListFilter> = ({ currentFilter }) => { return ( <ul> Filter <li onClick={() => currentFilter('All')}>All</li> <li onClick={() => currentFilter('Complete')}>Completed</li> <li onClick={() => currentFilter('Incomplete')}>Incompleted</li> </ul> ) } // App.js const currentFilter: CurrentFilter = filterTodo => { let activeFilter = filterTodo; switch (activeFilter) { case 'All': return todos; case 'Complete': return todos.filter(t => t.complete); case 'Incomplete': return todos.filter(t => !t.complete); default: console.log('Default'); } } return ( <React.Fragment> <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} editTodo={editTodo} saveEditedTodo={saveEditedTodo} getEditText={getEditText} /> <TodoFilter currentFilter={currentFilter}/> <AddTodoForm addTodo={addTodo}/> </React.Fragment> ) // TodoListItem import React from 'react'; import { TodoListItem } from "./TodoListItems"; interface TodoListProps { todos: Array<Todo>; toggleTodo: ToggleTodo; deleteTodo: DeleteTodo; editTodo: EditTodo; getEditText: GetEditText; saveEditedTodo: SaveEditedTodo; currentFilter: CurrentFilter; } export const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo, deleteTodo, editTodo, getEditText, saveEditedTodo, currentFilter }) => { return ( <ul> {todos.map((todo, i) => { return <TodoListItem key={i} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} editTodo={editTodo} saveEditedTodo={saveEditedTodo} getEditText={getEditText} /> })} </ul> ) } //Folder structure src -App.tsx -AddTodoForm.tsx -TodoFilter.tsx -TodoList.tsx

Answer 1

The reason why the list not updating is that currentFilter passed as a prop to TodoList component is not used there at all.

Please consider two ways of solving it:

• Pass a full list + filter object and apply filter inside TodoList
• Apply filter object on the list at App component level and pass filtered list to TodoList component.

Personally I would go with the second approach but it's up to you :)

Answer 2

You need to create two arrays.One is original and second is filtered like this in your example.

const [todos, setTodos] = useState(initialTodos);
const [filtered, setFiltered] = useState(initialTodos);

Now you need to send filtered array in list component.Any updation or deletion you have to make on your todos array.And in currentFilter,you have to filter from original array that is todos and set it to filtered array in like this:

useEffect(() => {
   setFiltered(todos);
}, [todos]);

Link of forked sandbox : link

Let me know if this helps you.