변경 전)
const ToggleButtonHandler = (id) => {
setTodo((prev) => (
prev.map((todo) =>
todo.id === id ? {...todo, isDone: !todo.isDone} : todo)))
변경 후)
1. 변경 과정
const ToggleButtonHandler = (id) => {
const filterNext = todos.filter((item) => item.id === id ? [{...item, isDone : !item.isDone}] : false)
setTodo((prev) => (
[...prev, filterNext[0]]
))
console.log(typeof filterNext, filterNext[0].isDone)
2. 변경 과정
const filterNext = todos.filter((item) => item.id === id ? true : false);
filterNext[0].isDone = !filterNext[0].isDone;
setTodo((prev) => {
const filterPrev = prev.filter((item) => {
return item.id === id ? false : true;
})
return [...filterPrev, filterNext[0]];
}
);
console.log(filterNext);
3. 변경 과정
const findNext = todos.find((item) => item.id === id ? true : false);
findNext.isDone = !findNext.isDone;
setTodo((prev) => {
const filterPrev = prev.filter((item) => {
return item.id === id ? false : true;
})
return [...filterPrev, findNext];
}
);
console.log(findNext);