javascript - Position ranking table in react js

Question

i'm creating a web app in Reactjs with a ranking table all managed by firebase, but i came across a doubt: after sorting the table based on who wagered the most money with the 'order by' command, I wish I could be able to change the position number, for example if it was second it becomes first (from 2 to 1). That's my screen:

That's my code:

import React, {useState, useEffect} from 'react'
import './Table.css'
import {firebase} from '../../firebase'


function Table() {

const [peopleShow, setPeopleShow] = useState([]);

const ref = firebase.firestore().collection("Lista");
console.log(ref);

function getData(){
  ref
  .orderBy("money", "desc")
  .onSnapshot((querySnapshot) => {
    const items = [];
    querySnapshot.forEach((doc) => {
      items.push(doc.data());
    });
    setPeopleShow(items);
  })
}

useEffect(() => {
  getData();
}, [])

return (
<section>
<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="0">
  <tbody>
  {peopleShow.map((val) => {
    return( 
    <tr key={val.ID}>
      <td>{val.ID}</td>    
      <td>{val.nationality}</td>
      <td>{val.username}</td>
      <td>{val.money}  $  <i class="far fa-caret-up"></i></td>
      <td>{val.lastbid}</td>
      <td>{val.newbid} $</td>
    </tr>
   )
   })}
   </tbody>
   </table>
   </div>
   </section>
  )}
  export default Table

so i was wondering to solve this doubt, should i do a bubble sort? I state that the positions of the table I had defined momentarily with the id of my database. Thanks to all!!

Answer 1

You can use the index in the map function instead of making the number dependant on the data.

{peopleShow.map((val, index) => {
    return( 
    <tr key={val.ID}>
      <td>{index + 1}</td>    
      <td>{val.nationality}</td>
      <td>{val.username}</td>
      <td>{val.money}  $  <i class="far fa-caret-up"></i></td>
      <td>{val.lastbid}</td>
      <td>{val.newbid} $</td>
    </tr>
   )
   })}