Sort an array of objects in React and render them

Question

I have an array of objects containing some information  I am not able to render them in the order I want and I need some help with that  I render them like this         this state data map       item  i    gt   lt div key  i  gt   item matchID   item timeM   item description  lt  div gt      Is it possible to sort them ascending with item timeM in that map  -function or do I have to sort them before i use map

User · Answer

Chrome browser considers integer value as return type not boolean value so    this state data sort  a  b    gt  a item timeM  gt  b item timeM   1 -1  map       item  i    gt   lt div key  i  gt   item matchID   item timeM   item description  lt  div gt

User · Answer

x000D   x000D  const list         qty  10  size   XXL         qty  2  size   XL         qty  8  size   M       list sort  a  b    gt   a qty  gt  b qty    1   -1   console log list  x000D   x000D   x000D   Out Put              quot qty quot   2       quot size quot    quot XL quot                quot qty quot   8       quot size quot    quot M quot                quot qty quot   10       quot size quot    quot XXL quot

User · Answer

This might be what you re looking for          rest of code     copy your state data to a new array and sort it by itemM in ascending order    and then map  const myData      concat this state data       sort  a  b    gt  a itemM  gt  b itemM   1   -1       map  item  i    gt            lt div key  i  gt   item matchID   item timeM  item description  lt  div gt             render your data here      The method sort will mutate the original array   Hence I create a new array using the concat method  The sorting on the field itemM should work on sortable entities like string and numbers

User · Answer

You will need to sort your object before mapping over them  And it can be done easily with a sort   function with a custom comparator definition like  var obj       this state data   obj sort  a b    gt  a timeM - b timeM   obj map  item  i    gt    lt div key  i  gt   item matchID                           item timeM   item description  lt  div gt

User · Answer

Try lodash sortBy   import   as   from  lodash     sortBy data applications  id   map application   gt        console log  application             Read more   lodash sortBy

User · Answer

this state data sort  a  b    gt  a item timeM  gt  b item timeM  map       item  i    gt   lt div key  i  gt   item matchID   item timeM   item description  lt  div gt

[javascript] Sort an array of objects in React and render them

Examples related to javascript

Examples related to reactjs