Tengo una serie de objetos que contienen alguna información. No puedo renderizarlos en el orden que quiero y necesito ayuda con eso. Los renderizo así:
this.state.data.map( (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div> )
¿Es posible ordenarlos de forma ascendente con item.timeM
en esa función map()
o tengo que ordenarlos antes de usar el mapa?
Esto podría ser lo que estás buscando:
// ... 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) => a.itemM > b.itemM ? 1 : -1) .map((item, i) => <div key={i}> {item.matchID} {item.timeM}{item.description}</div> ); // render your data here...
El método sort
mutará la matriz original . Por lo tanto, creo una nueva matriz utilizando el método concat
. La clasificación en el campo itemM
debería funcionar en entidades clasificables como cadenas y números.
Deberá ordenar su objeto antes de mapear sobre ellos. Y se puede hacer fácilmente con una función sort()
con una definición de comparador personalizada como
var obj = [...this.state.data]; obj.sort((a,b) => a.timeM - b.timeM); obj.map((item, i) => (<div key={i}> {item.matchID} {item.timeM} {item.description}</div>))
this.state.data.sort((a, b) => a.item.timeM > b.item.timeM).map( (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div> )