Rendering every array items in Reactjs?

Question

Attempting to render every item from my generateSeats func but I'm only rendering one seat at the moment. I know my first func should return an array but rendering every item in the array on screen has gotten me stumped.

const generateSeats = () => {
    let numRow = 8;
    let numColumn = 3;
    let rowArray = [];
    let start = 1;
    let reachnine = false;

    for(let i=0;i<numRow;i++) {
        let columnArray = [];
        for(let j=0;j<numColumn;j++) {
            let seatObject = {
                number : start,
                taken : Boolean(Math.round(Math.random())),
                selected: false, 
            }
            columnArray.push(seatObject);
            start++;
        }
        if(i==3){
            numColumn += 2
        }
        if(numColumn <9 && !reachnine) {
            numColumn +=2;
        } else {
            reachnine=true;
            numColumn -= 2;
        }
        rowArray.push(columnArray)
    }
    return rowArray
}

const PurchaseTicket = () => {
  return (
    <div className='w-full h-full  overflow-auto scrollbar-hide'>
        <div className='w-full h-full flex flex-1 bg-black'>
            <div className='bg-white w-[12px] h-[12px] rounded-t-[10px]'>{generateSeats}       
            </div>
        </div>
    </div>
  )

Answer 1

Maybe something like this would work for you? I've used the map function to get every row and then the same thing to get every seat:

return (
    <div className="w-full h-full  overflow-auto scrollbar-hide">
      <div className="w-full h-full flex flex-1 bg-black">
        {generateSeats().map((row) => {
          return row.map((seat) => {
            return (
              <div className="bg-white w-[12px] h-[12px] rounded-t-[10px]">
                {/*Here you can access every value by seat.<value>*/}
                {seat.number}
              </div>
            );
          });
        })}
      </div>
    </div>
  );