JSFiddle - React, Tailwind, and code Playground

by Jagrati Tomar

JavaScript

function Table({ rows, cols }) {
  const rowsArr = new Array(rows).fill(0);
  const colsArr = new Array(cols).fill(0);
  return (
    <table>
      <tbody>
        {rowsArray.forEach((_, i) => (
          <tr>
            {colsArr.forEach((_, j) => (
              <td>{`${i}-${j}`}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default function App() {
  const [rows, setRows] = useState(0);
  const [cols, setCols] = useState(0);

  return (
    <>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const data = new FormData(event.target);
          const rows = data.get("row");
          const columns = data.get("col");
          setRows(rows);
          setCols(columns);
        }}
      >
        <label for="row">Row: </label>
        <input id="row" />
        <label for="col">Col: </label>
        <input id="col" />
        <button type="submit">Submit</button>
      </form>
      <Table rows={rows} cols={cols} />
    </>
  );
}