Array Re arrange in React js

Question

I have some array objects for listing.

based on the list, if the user clicks the particular list item from the objects,

need to show the particular clicked list item as first.

var list = [
 {
 tradeareaid: "80"
 tradeareaname: "test1"
 },
 { 
 tradeareaid: "81"
 tradeareaname: "test2"
 },
 { 
 tradeareaid: "82"
 tradeareaname: "test3"
 },
 { 
 tradeareaid: "83"
 tradeareaname: "test4"
 },
 { 
 tradeareaid: "84"
 tradeareaname: "test5"
 },
]

in the list If I selected trade area 83 means I needed the list like below

var list = [
 { 
 tradeareaid: "83"
 tradeareaname: "test4"
 },
 {
 tradeareaid: "80"
 tradeareaname: "test1"
 },
 { 
 tradeareaid: "81"
 tradeareaname: "test2"
 },
 { 
 tradeareaid: "82"
 tradeareaname: "test3"
 },
 { 
 tradeareaid: "84"
 tradeareaname: "test5"
 },
]

How to achieve this?

Answer 1

You can get the tradeareaid of the item which is clicked and use the getSortedList function (in a click event handler) to get the new list something like this :

var list = [
 {
 tradeareaid: "80",
 tradeareaname: "test1"
 },
 { 
 tradeareaid: "81",
 tradeareaname: "test2"
 },
 { 
 tradeareaid: "82",
 tradeareaname: "test3"
 },
 { 
 tradeareaid: "83",
 tradeareaname: "test4"
 },
 { 
 tradeareaid: "84",
 tradeareaname: "test5"
 },
]
function getSortedList(id){
 const clickedItem = list.find(item=>item.tradeareaid===id)
 const filterdList = list.filter(item=>item.tradeareaid!==id)
 return [clickedItem,...filterdList]
}
const sortedList = getSortedList(list[3].tradeareaid)
console.log({sortedList})

Answer 2

You need to set some key for sort onclick

var list = [ { tradeareaid: "80", tradeareaname: "test1" }, { tradeareaid: "81", tradeareaname: "test2" }, { tradeareaid: "82", tradeareaname: "test3" }, { tradeareaid: "83", tradeareaname: "test4" }, { tradeareaid: "84", tradeareaname: "test5" }, ]
//if test4 was clicked 
clicked = 3; // index
list.forEach((a, b) => {
 list[b]['key'] = b;
 if (b == clicked) {
 list[b]['key'] = -1;
 }
})
console.log(list.sort((a, b) => a.key - b.key))