如何在反应js中移动列表中的项目

Question

`Hi guys, I need help with react js, what happens is that I want to move an item from a specific list to the last place, but when I move it, it doesn't load the data I had before, unfortunately I'm very new to react js and ps isn't I know all of them, so I turn to this community in search of help and soon I will upload the code and I hope you can help me, thanks.

const [categories, setCategories] = useState<CategoriesWithSubsCategories>()

const listSelectCategory = categories?.list.map(cat =\> {
  const { category, id } = cat.category
  return {
    value: id,
    label: category
  }
}).filter(cat =\> cat.label !== 'Otros')
listSelectCategory?.sort((a, b) =\> a.label.localeCompare(b.label)).push({ value: 'Otros', label: 'Otros' })``

As you have seen above, try using the filter attribute to filter that category and then use the push attribute to add it to the end of the list, it worked but not how it should work because the category that I want to put at the end of the list should bring me some subcategories but it doesn't It does and that is where my problem lies.`

Answer 1

try to set the result using the setState variable. I don't see that anywhere.

Answer 2

If you want to access the data from the variable named categories add this line at the bottom of your code, it will update the value of the variable with the setState function.

setCategories(listSelectCategory)

Answer 3

You can do something like this:

const [categories, setCategories] = useState<CategoriesWithSubsCategories>();

...

// suppose categories is defined
setCategories((prev) => {
    const newList = [...prev.list];
    newList.push(newList.splice(newList.findIndex((item) => item.label === "Otros"),1)[0]);
    return {
        ...prev,
        list: newList
    };
});