DEV Community

loading...

Discussion on: React Hooks and Local Storage: Let’s build a ToDo app

saranshk profile image
saransh kataria Author

I think you are mixing two concepts: useState and useReducer. If you are using the reducer to update the state, you do not need to use useState again. I am not sure why you are doing that in the handleAdd and handleRemove methods. I would recommend reading more about useReducer to grasp it's concepts first. This post about useReducer should help you in doing that.

And for the remove not working, you are updating the value in the array with isSelected to false, not removing it. If you wanted to remove the entry on remove, you should use

const newListRemove_Intro = introClassList.filter((item) => {
      return (item.name !== name)
});
    setList_Intro(newListRemove_Intro);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
bethwickerson profile image
bethwickerson

Thank you so much for you response. It is really confusing because I am updating the state of two different arrays. One is my original list with items to select, which are added to a new list with the useReducer. In the original list I was adding useState to be able to detect whether an item in my original list has been selected so I can toggle the handleAdd/handleRemove function, and prevent duplicates from being added to my new list, but they are out of sync with each other.
Is there a way to prevent duplicates in the useReducer function? I am trying to concat and filter, but nothing is working and I have been reading about reducers and context until my eyes bug out. I feel like the answer could be as simple as concatenating the selected items and then filtering out the duplicates, but I only get errors or empty arrays when I do anything to this line.

case 'ADD_ITEM': return state.concat({ name: action.name, info: action.info });

Thread Thread
saranshk profile image
saransh kataria Author

you can change it to:

case 'ADD_ITEM':
if(state.find(obj => obj.name === action.name)){
return state;
}
else {
return state.concat({ name: action.name, info: action.info });
}

That should work. Also, I had to download the code at github.com/bethwickerson to understand the challenge you were facing and a suggestion: you don't need the .cache folder and node_modules committed to git. You can add those to .gitignore and then also run git rm -r --cached node_modules to remove it from git cache. Hope that helps!

Thread Thread
bethwickerson profile image
bethwickerson

That did it! I cannot possibly thank you enough. I would have never thought to code that myself like that, and kudos to you for finding my repo, as you can see it is for a good organization. I learned a ton from your posts, I really appreciate you taking the time to solve this issue for me. And thank you for the suggestion on the .gitignore, I had thought I added node_modules but I forgot the ending /

This has helped so much!

Thread Thread
saranshk profile image
saransh kataria Author

You are welcome. Glad I could help!