I wanna make a project like “Google Keep” project but when remove element from Note list ,I faced a problem. I wrote a callback (remoteElement)and pass as probs(removeCallback) every Note Component.
and When I clicked button , element was removing from list with MoveTrashhandle() function
but I have a problem
example list have two elements. [“A”,”B”]
if first I remove “B” not be a problem. but
if first I remove “A” , I can’t remove “B”
and Trying to delete “A” from the list
Why Does this do ? , is callback function wrong ?
Note.js
function Note({ children, removeCalback }, key) {
const [note, setNote] = useState(children);
const [fav, setfav] = useState(false);
const dispatch = useDispatch();
useEffect(() => {});
const AddFavhandle = () => {
dispatch(addFavorie(note));
setfav(true);
};
const removeFavhandle = () => {
setfav(false);
dispatch(removeFavorite(note));
};
const MoveTrashhandle = () => {
dispatch(addTrash(note));
removeCalback(note);
};
return (
<div className="d flex">
<button
onClick={() => {
!fav ? AddFavhandle() : removeFavhandle();
}}
style={{ height: 20, width: 20, background: !fav ? "grey" : "yellow" }}
></button>
<li>{children}</li>
<button
onClick={() => {
MoveTrashhandle();
}}
className="bg-green-200"
>
MoveTrash
</button>
</div>
);
}
export default Note;
ListComp.js
function ListComp({ NoteStr }) {
const [noteList, setnoteList] = useState([NoteStr]); //reducer a taşı
const [continueBool, setContinueBool] = useState(false);
useEffect(() => {
!continueBool ? setContinueBool(true) : setnoteList([...noteList, NoteStr]);
}, [NoteStr]);
const removeElement = (item) => {
console.log(item);
const updatedList = noteList.filter((note) => note !== item);
setnoteList(updatedList);
console.log(noteList);
};
useEffect(() => {}, [noteList]);
return (
<div>
{console.log("ListComp rendered")}
{noteList && noteList.length > 0 ? (
noteList.map((note, index) => (
<>
{console.log(note, "note")}
<Note key={index} removeCalback={removeElement}>
{note}
</Note>
</>
))
) : (
<li>Not bulunamadı</li>
)}
</div>
);
}
export default ListComp
I would be glad if you help .Thanks.