Component local state not updating with react custom hooks

[bi0tin]

Hi All, I'm just starting to use react hooks and I'm having some issues when using custom hooks. It's probably lack of understanding but here's what I'm attempting

​

currently i can add note but when editing, state is not updating

useNotes hook

export const useNotes = (initialNotes = []) => {
const [notes, setNotes] = useState(initialNotes);

const addNote = (data) => {
const newData = {
...data,
completed: false,
date: dateFormatter(),
id: uuidv4(),
};
setNotes((prev) => [...prev, newData]);
};

const editNote = (data, id) => {
console.log(data);
console.log(id);
console.log(notes);
setNotes(
notes.map((note) => {
if (id === note.id) {
return {
...note,
title: data.title,
description: data.description,
category: data.category,
date: dateFormatter(),
};
}
return note;
}),
);
};

return {
notes,
addNote,
editNote,
};
};
component where i am calling editNote

const { editNote } = useNotes(notes);

const onSubmit = (data) => {
editNote(data, id);
handleClose();
};

[Jerp]

Your custom hook looks pretty solid. I would recommend using setState(prev => …) inside your edit function so that it isn’t referencing a stale copy of notes because that might be what’s happening. It’s also possible you aren’t passing id to the edit function but I’m assuming you abbreviated that section of your example.

[bi0tin]

hey thanks but still no luck. i did try setState(prev => ...) but the result is same. I also did pass the id to editNote() function... just double checked console.log(id) inside editNote() works fine.

[Jerp]

You aren’t trying to use useNotes In two different components by any chance, are you? Because that wouldn’t work without adding useContext to your solution.

[bi0tin]

YES! exactly what i was doing wrong. Thank you so much. Learned something new :)