Trier un tableau d'objets dans React et les rendre

Question

J'ai un tableau d'objets contenant des informations. Je ne parviens pas à les restituer dans l'ordre que je souhaite et j'ai besoin d'aide à ce sujet. Je les restitue comme suit :

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 en ce sens que map() Est-ce que je dois les trier avant d'utiliser la carte ?

Answer 1

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

// ... 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 sort modifiera le tableau d'origine . Je crée donc un nouveau tableau à l'aide de la fonction concat méthode.

Answer 2

Vous devrez trier vos objets avant de les cartographier. Et cela peut être fait facilement avec un 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>
)