How to sort the array in React Hooks using UseState

Question

I am Fetching the data from Server and I am having two Objects with "name" and "Money" in the array Now I need to sort the array by comparing with money field, After trying with below code I am getting error like "TypeError: Cannot read property 'money' of undefined" , somewhere I facing problem with If condition,

const [dataObject, setdataObject] = useState([{}])

  const sortbyRich=()=>{
       
         for(let i=0;i<dataObject.length;i++){
           for(let j=0;j<dataObject.length;j++){
              if(dataObject[j].money < dataObject[j+1].money){
                
                    let temp = dataObject[j];
                    dataObject[j]= dataObject[j+1];
                    dataObject[j+1]= temp;
              }  
           }
         }
       setdataObject(dataObject);
   }

Does this answer your question? Sorting an array of objects by property values — CertainPerformance
– CertainPerformance, Commented Oct 13, 2020 at 5:25
Firstly, you are mutating the state. NEVER mutate state in React. Secondly, if your loop reaches the last element in the array, then this code dataObject[j+1].money will look for the next one, but since there's no next one then dataObject[j+1] will be undefined, and you'll get that error. Check if you're at the last element before trying to access the next one — Jayce444
– Jayce444, Commented Oct 13, 2020 at 5:26
Or just const sortByRich = () => setdataObject(prevData => prevData.slice().sort((a, b) => b.money - a.money)); — Patrick Roberts
– Patrick Roberts, Commented Oct 13, 2020 at 5:28

Drew Reese · Accepted Answer · 2020-10-13 05:58:36Z

4

The issue is this line

if(dataObject[j].money < dataObject[j+1].money){

Your initial state is an array with only 1 element in it, so not only by definition is it already sorted, but accessing object properties past the last index j + 1 will yield an undefined access error.

Use a regular array::sort and pass your own comparator. Use a functional state update, copy the current array, sort in-place and return new sorted array.

Since comparing numbers:

setdataObject(data => {
  const dataToSort = [...data];
  dataToSort.sort((a, b) => Number(a.money) - Number(b.money)); // or b.money - a.money to invert order
  return dataToSort; // <-- now sorted ascending
})

const data = [
  {
    id: 0,
    money: '13.37'
  },
  {
    id: 1,
    money: '13.36'
  },
  {
    id: 2,
    money: '6.99'
  },
  {
    id: 3,
    money: '14'
  },
  {
    id: 4,
    money: '0.03'
  },
  {
    id: 5,
    money: '6.98'
  }
];

const App = () => {
  const [dataObject, setdataObject] = useState(data);

  const sortByRich = () => {
    setdataObject((data) => {
      const dataToSort = [...data];
      dataToSort.sort((a, b) => Number(a.money) - Number(b.money));
      return dataToSort;
    });
  };

  return (
    ...
  );
}

edited Oct 13, 2020 at 5:58

answered Oct 13, 2020 at 5:31

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

4 Comments

Sundeep Over a year ago

Can you do this in Stackbiltz , Because when we return dataToSort it is giving me the original array data only not the sorted array data

Patrick Roberts Over a year ago

@Sundeep that's a tall request considering you haven't provided a minimal reproducible example yourself.

Sundeep Over a year ago

Here a small mistake is we nee to change parseInt(b.money) - parseInt(a.money) then Its works for me

Drew Reese Over a year ago

@Sundeep Sure. Updated answer to provide a running codesandbox.

Ketan Ramteke · Accepted Answer · 2020-10-13 05:50:42Z

2

// let's assume you are getting this array of object

let objArr = [
  {name: "Elon", money: 80},
  {name: "Jeff", money: 100},
  {name: "Bill", money: 10}
];

/*
Now just sort it.
For desc sort: objArr.sort((a,b) => parseInt(b.money) - parseInt(a.money))
For asc sort: objArr.sort((a,b) => parseInt(a.money) - parseInt(b.money))
*/
objArr.sort((a,b) => parseInt(b.money) - parseInt(a.money))

console.log(objArr);

/*
OUTPUT:
[
  { name: 'Jeff', money: 100 },
  { name: 'Elon', money: 80 },
  { name: 'Bill', money: 10 }
]

*/

// now use the hook to save sorted data

setObjectdata(objArr);

edited Oct 13, 2020 at 5:50

answered Oct 13, 2020 at 5:41

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

4 Comments

Sundeep Over a year ago

I am getting the sorted array data in console, But It is not updating the state in browser I did like this dataObject.sort((a,b) => b.money - a.money) console.log(dataObject); setdataObject(dataObject);

Patrick Roberts Over a year ago

@Sundeep it's because sort() operates in place. As Drew correctly points out, you need to copy the current array before sorting it so that React will correctly update the state.

Sundeep Over a year ago

Yes it working thanks a lot, Your code solved my Issue

Mordechai Over a year ago

You would want to memoize the sorted start to avoid re-sorting on each render, only on array changes

Collectives™ on Stack Overflow

How to sort the array in React Hooks using UseState

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related