Javascript bubble sort to order a ranking table in Reactjs

Question

I'm new here and i'm creating a web app where i show a ranking table of people who bid more, i made already a bubble sort where I sort people according to who bet the most from mysql database and then i put this value into the table, but i came across a doubt:

import React, { useState, useEffect } from 'react';
import './Table.css';
import Axios from 'axios';

function Table() {
  const [peopleShow, setPeopleShow] = useState([]);

  useEffect(() => {
    Axios.get('http://localhost:3001/show').then(response => {
      setPeopleShow(response.data);
    });
  }, []);

  return (
    <section>
      <div class="tbl-header">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
            <tr>
              <th>Ranking</th>
              <th>Nationality</th>
              <th>Username</th>
              <th>Money</th>
              <th>Last bid</th>
              <th>New bid</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-content">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            {peopleShow.map(val => {
              let bubblesort = val => {
                let len = val.money.length;
                let swapped;
                do {
                  swapped = false;
                  for (let i = 0; i < len; i++) {
                    if (val.money[i] > val.money[i + 1]) {
                      let tmp = val.money[i];
                      val.money[i] = val.money[i + 1];
                      val.money[i + 1] = tmp;
                      swapped = true;
                    }
                  }
                } while (swapped);
                return val;
              };
              return (
                <tr>
                  <td>fff</td>
                  <td>{val.nationality}</td>
                  <td>{val.username}</td>
                  <td>{val.money}</td>
                  <td>{val.lastbid}</td>
                  <td>-0.36%</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </section>
  );
}
export default Table;

How can i pass the variable of the money into the bubble sort? thanks!!

Answer 1

You can define bubblesort function as a component function.

import React, { useState, useEffect } from 'react';
import './Table.css';
import Axios from 'axios';

function Table() {
  const [peopleShow, setPeopleShow] = useState([]);

  useEffect(() => {
    Axios.get('http://localhost:3001/show').then(response => {
      setPeopleShow(response.data);
    });
  }, []);

  const bubblesort = val => {
    let len = val.money.length;
    let swapped;
    do {
      swapped = false;
      for (let i = 0; i < len; i++) {
        if (val.money[i] > val.money[i + 1]) {
          let tmp = val.money[i];
          val.money[i] = val.money[i + 1];
          val.money[i + 1] = tmp;
          swapped = true;
        }
      }
    } while (swapped);
    return val;
  };

  return (
    <section>
      <div class="tbl-header">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
            <tr>
              <th>Ranking</th>
              <th>Nationality</th>
              <th>Username</th>
              <th>Money</th>
              <th>Last bid</th>
              <th>New bid</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-content">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            {peopleShow.map(item => {
              const val = bubblesort(item);
              return (
                <tr key={val.username}>
                  <td>fff</td>
                  <td>{val.nationality}</td>
                  <td>{val.username}</td>
                  <td>{val.money}</td>
                  <td>{val.lastbid}</td>
                  <td>-0.36%</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </section>
  );
}
export default Table;

Also don't forget to set key prop for mapping items.