Bubble sort Algorithm

import React from 'react'
import './App.css';

function App() {

// Creating the bblSort function
function bblSort(arr){

  for(var i = 0; i < arr.length; i++){

      // Last i elements are already in place
      for(var j = 0; j < ( arr.length - i -1 ); j++){

        // Checking if the item at present iteration
        // is greater than the next iteration
        if(arr[j] > arr[j+1]){

        // If the condition is true then swap them
        var temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j+1] = temp
        }
      }
    }

  }


  // This is our unsorted array
  var arr = [234, 43, 55, 63, 5, 6, 235, 547,100,98,70,900,80,1];
  const UnSortedArray = arr.map((number) =>
      <li>{number}</li>
    );

  //function calling
  bblSort(arr)

  //this is our sorted array
  const SortedArray = arr.map((number) =>
      <li>{number}</li>
    );

  return (
    <div className='main-div'>
      <div className='bg-dark text-light text-center'>
        <h1 className='display-3 text-light my-3'>Unsorted Array</h1>
        <ul>
          {UnSortedArray}
        </ul>
      </div>
      <div className='bg-primary text-light text-center'>
        <h1 className='display-3 text-light my-3'>Sorted Array Using Bubble Sort</h1>
        <ul>
          {SortedArray}
        </ul>
      </div>


    </div>
  );
}

export default App

.main-div{
  display: grid;
  place-content: center;
  grid-template-columns: repeat(2,1fr);
  padding: 2rem;

}

.main-div > div{
  border-radius: 10px;
  padding: 1rem;
}

ul{
  list-style-type: none;

}

ul > li{
  font-size: 25px;
}