Chess Board Code

App.js

import './App.css';
import { useState, useRef } from 'react';

function App() {
  const [rows, setRows] = useState(0);
  const rowsRef = useRef();
  const handleSubmit = () => {
    setRows(+rowsRef.current.value);
  };

  const rowsArray = [];

  for (let i = 0; i < rows; i++) {
    rowsArray.push(i);
  }

  const blackFirst = (
    <div className="flex ">
      {rowsArray.map((item, i) => (
        <div
          className={`w-[40px] h-[40px]  ${i % 2 === 0 ? 'bg-black' : 'bg-white'} `}
          key={i}
        ></div>
      ))}
    </div>
  );

  const whiteFirst = (
    <div className="flex ">
      {rowsArray.map((item, i) => (
        <div
          className={`w-[40px] h-[40px]   ${i % 2 === 0 ? 'bg-white' : 'bg-black'} `}
          key={i}
        ></div>
      ))}
    </div>
  );

  return (
    <div className="flex justify-center items-center flex-col">
      <div className="m-20">
        <input type="number" placeholder="no of rows " ref={rowsRef} />
        <button className="bg-blue-300 p-3 shadow-lg" onClick={handleSubmit}>
          Design Chess Board
        </button>
      </div>

      <div className="master-div   shadow-xl bg-gray-200">
        {rowsArray.map((item, i) => (i % 2 === 0 ? whiteFirst : blackFirst))}
      </div>
    </div>
  );
}