Triez un tableau d'objets dans React et rendez-les

Question

J'ai un tableau d'objets contenant des informations. Je ne peux pas les rendre dans l'ordre que je veux et j'ai besoin d'aide pour cela. Je les rends comme ceci:

this.state.data.map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

Est-il possible de les trier par ordre croissant avec item.timeM dans cette fonction map()- ou dois-je les trier avant d'utiliser Map?

Answer 1

C'est peut-être ce que vous cherchez:

// ... 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...

La méthode sorttransformera le tableau d'origine . Par conséquent, je crée un nouveau tableau en utilisant la méthode concat.

Answer 2

Vous devrez trier votre objet avant de le mapper. Et cela peut être fait facilement avec une fonction sort() avec une définition de comparateur personnalisée comme

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>))

Answer 3

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>
)