Removing an specific item from an array in React-CodePudding

i have this code https://stackblitz.com/edit/react-wc2ons?file=src/Section.js

I have sections, and i can add items to those sections. How can i delete some item? I tried

const removeItem = (i) => {
    setSections((section) => {
      const itemTarget = section.items[i];
      const filtered = section.items.filter((item) => item !== itemTarget);
      return {
        ...section,
        items: filtered,
      };
    });
  };

But for some reason it doesn't work

CodePudding user response：

You are using setSections, but you return a single section instead of an array of sections. You probably need something like this:

// using the `section` variable from the upper scope
const removeItem = (i) => {
    setSections((sections) => {
      const itemTarget = section.items[i];
      const filtered = section.items.filter((item) => item !== itemTarget);
      const newSections = [...sections];
      newSections[section.id] = {
        ...section,
        items: filtered,
      };
      return newSections;
    });
  };

A few tips (you don't have to follow them): TypeScript can prevent such mistakes and give useful error messages. Immer.js can make writing such code simpler.

CodePudding user response：

Your problem is that section is an array. So you are currently accessing the undefined property items on it. You would have to change your function to something like this

  const removeItem = (i) => {
    setSections((section) /* aqui vc tinha chamado de prev*/ => {
      const itemTarget = section[i].items[j];
      const filtered = section[i].items.filter((item) => item !== itemTarget);
      return [...section, {
        ...section[i],
        items: filtered,
      }]
    });
  };

where i is the section in question and j is the item you want to delete.

CodePudding user response：

here is a crude solution to your problem (i noticed other bugs in the code but this solves your issue with removing items at least), but i would separate the sections and items into separate components that in turn has its own states. There you can add/remove items withing its parent section much more easily.

Now we have to work around this by looking for which section the code wants to remove the current item in.

https://stackblitz.com/edit/react-xxbvp1?file=src/Section.js