How to reorder all array items to specific index in React?

Question

My users are able to reorder a list of categories and I need to persist indexes of the array items so the order stays even when the user closes the app.

I have tried this, but it does not work because the data changes when mapping. I just can't get the logic in my head, how to achieve this.

Below is example data, and the logic I've attempted:

order: [
  {id: "5", index: 0},
  {id: "4", index: 1},
  {id: "1", index: 2},
  {id: "2", index: 3},
  {id: "3", index: 4},
]

data: [
  {id: "1", category: "Category1"},
  {id: "2", category: "Category2"},
  {id: "3", category: "Category3"},
  {id: "4", category: "Category4"},
  {id: "5", category: "Category5"},
]

orderCategories = (data, order) => {
  data.map((dataValue, dataIndex) => {
    order.map((value, index) => {
      if (dataValue.id === value.id && dataIndex !== index) {
        this.setState({data: arrayMove(data, dataIndex, index)})
      }
    });
  });
};

Below is the resulting data array:

data: [
  {id: "5", category: "Category5"},
  {id: "1", category: "Category1"},
  {id: "2", category: "Category2"},
  {id: "3", category: "Category3"},
  {id: "4", category: "Category4"},
]

But I want it to be:

data: [
  {id: "5", category: "Category5"},
  {id: "4", category: "Category4"},
  {id: "1", category: "Category1"},
  {id: "2", category: "Category2"},
  {id: "3", category: "Category3"},
]

What am I doing wrong here?

Rishi Jodha · Accepted Answer · 2019-11-12 13:15:03Z

1

You can do something like this:

orderCategories = (data, order) => {
order.forEach(order => {
    result[order.index] = data.find(data => data.id === order.id)
  }
return result;
)}

answered Nov 12, 2019 at 13:15

Rishi Jodha

1864 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j-gottlieb · Accepted Answer · 2019-11-12 13:01:09Z

0

It may be easier to store the index in the same data object so that you can use .sort

[
  {id: "1", category: "Category1", index: 2},
  {id: "2", category: "Category2", index: 3},
  {id: "3", category: "Category3", index: 4},
  {id: "4", category: "Category4", index: 1},
  {id: "5", category: "Category5", index: 0},
]

then sort like this:

data.sort((a, b) => a.index - b.index)

answered Nov 12, 2019 at 13:01

j-gottlieb

216 bronze badges

Comments

Džiugas Baltramėnas · Accepted Answer · 2019-11-12 13:02:34Z

0

You can use .sort() funnction and pass comparer as a parameter.

orderCategories = (data, order) => {
  return data.sort((item1, item2) => {
     const index1 = order.find(orderItem => orderItem.id === item1.id).index;
     const index2 = order.find(orderItem => orderItem.id === item2.id).index;

    return index1 - index2;
  });
};

answered Nov 12, 2019 at 13:02

Džiugas Baltramėnas

1

Collectives™ on Stack Overflow

How to reorder all array items to specific index in React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related