Todo fetcher and Filter - reactjs

Question

I'm having difficulty in filtering the my todo-data according to the checkbox value. By default checkbox is checked which shows all data from the response. when Show Completed is checked alone it should only display the completed items, similarly for Show Incompleted checkbox.
export const Todo = () => {
const [todo, setTodo] = useState([]);
const [loading, setloading] = useState(false);
//fetched data
async function fetchData() {
setloading(true);
const data = await fetch("https://jsonplaceholder.typicode.com/todos ");
let res = await data.json();
res = res.splice(0, 20);
setTodo(res);
setloading(false);
}
useEffect(() => {
fetchData();
}, []);
//handle onChange
const compCheck = (e) => {
};
const InCompCheck = (e) => {
};
return (
<>
{loading && (
<h1>
<Loader />
</h1>
)}
{!loading && (
<>
<TodoItems todo={todo} loading={loading} />
<div id="filter-holder">
<label>Show Completed</label>
<input
id="completed-checkbox"
type="checkbox"
onChange={compCheck}
checked //by default should be checked to show complete list
/>
<br />
<label>Show Incompleted</label>
<input
id="incompleted-checkbox"
type="checkbox"
onChange={InCompCheck}
checked
/>
</div>
</>
)}
</>
);
};
this is sandbox link: https://codesandbox.io/s/todo-fetcher-and-filter-rci40?file=/src/Todo.js

Answer 1

Create a state for two checkboxes, update the state on change listener and then filter the todo array based on the checkbox state.
export const Todo = () => {
const [todo, setTodo] = useState([]);
const [loading, setloading] = useState(false);
const [checked, setChecked] = useState({ complete: true, incomplete: true });
async function fetchData() {
setloading(true);
const data = await fetch("https://jsonplaceholder.typicode.com/todos ");
let res = await data.json();
res = res.splice(0, 20);
setTodo(res);
setloading(false);
}
useEffect(() => {
fetchData();
}, []);
const getFilteredTodo = () => {
//if both are unchecked show nothing
if (!checked.complete && !checked.incomplete) return [];
return todo.filter((obj) => {
//if both are checked show all todo
if (checked.complete && checked.incomplete) return obj;
//filter objects based on the `Show completed` checkbox state
return checked.complete ? obj.completed: !obj.completed
});
};
const compCheck = (e) => {
setChecked((curr) => ({ ...curr, complete: e.target.checked }));
};
const InCompCheck = (e) => {
setChecked((curr) => ({ ...curr, incomplete: e.target.checked }));
};
return (
<>
{loading && (
<h1>
<Loader />
</h1>
)}
{!loading && (
<>
<TodoItems todo={getFilteredTodo()} loading={loading} />
<div id="filter-holder">
<label>Show Completed</label>
<input
id="completed-checkbox"
type="checkbox"
onChange={compCheck}
checked={checked.complete}
/>
<br />
<label>Show Incompleted</label>
<input
id="incompleted-checkbox"
type="checkbox"
onChange={InCompCheck}
checked={checked.incomplete}
/>
</div>
</>
)}
</>
);
};

Answer 2

First thing you need to do is controll your checkbox value and store in state.
Then write a filter function that filters the original TODO list. Then call the function in the component so that it executes itself with every state update and then loop through its result to render it.
const filterTodos = (todos, showCompleted, showIncompleted) => {
let filteredList = todos;
if (!showCompleted)
filteredList = filteredList.filter((todo) => !todo.completed);
if (!showIncompleted)
filteredList = filteredList.filter((todo) => todo.completed);
return filteredList;
};
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [loading, setLoading] = useState(true);
//Set the initial values in state not in the input props
const [showCompleted, setShowCompleted] = useState(true);
const [showIncompleted, setShowIncompleted] = useState(true);
const onCompletedChangeHandler = (e) => {
setShowCompleted(e.target.checked);
};
const onInCompletedChangeHandler = (e) => {
setShowIncompleted(e.target.checked);
};
useEffect(() => {
async function fetchData() {
setLoading(true);
const data = await fetch("https://jsonplaceholder.typicode.com/todos ");
let res = await data.json();
res = res.splice(0, 20);
setTodos(res);
setLoading(false);
}
fetchData();
}, []);
return (
<>
{loading && (
<h1>
<Loader />
</h1>
)}
{!loading && (
<>
<TodoItems
todo={filterTodos(todos, showCompleted, showIncompleted)}
loading={loading}
/>
<div id="filter-holder">
<label>Show Completed</label>
<input
id="completed-checkbox"
type="checkbox"
onChange={onCompletedChangeHandler}
value={showCompleted}
/>
<br />
<label>Show Incompleted</label>
<input
id="incompleted-checkbox"
type="checkbox"
onChange={onInCompletedChangeHandler}
value={showIncompleted}
/>
</div>
</>
)}
</>
);
};