Tengo un array de objetos que contienen cierta información. No soy capaz de 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 ascendentemente con item.timeM
en esa función map()
o tengo que ordenarlos antes de usar map?
Esto podría ser lo que está 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)
.map((item, i) =>
<div key={i}> {item.matchID} {item.timeM}{item.description}</div>
);
// render your data here...
El método sort
mutará el array original . Por lo tanto creo un nuevo array usando el método concat
.
Necesitarás ordenar tus objetos antes de mapearlos. 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>
)