Tran2

src/app.jsx

@@ -1,14 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
 import "./style.css";
+import Table from "./components/Table";
 
 const App = () => {
+  const [grid, setGrid] = useState([[""]]);
+
+  const addRow = () => {
+    const newRow = new Array(grid[0].length).fill("");
+    setGrid([...grid, newRow]);
+  };
+
+  const addColumn = () => {
+    const newGrid = grid.map(row => [...row, ""]);
+    setGrid(newGrid);
+  };
+
+  const removeRow = () => {
+    if (grid.length > 1) {
+      setGrid(grid.slice(0, -1));
+    }
+  };
+
   return (
     <div className="app">
-      <h1 className="title">Hello World</h1>
+      <h1>Interactive Grid</h1>
+      <div className="btns">
+        <button onClick={addRow}>Add Row</button>
+        <button onClick={addColumn}>Add Column</button>
+        <button onClick={removeRow}>Remove Row</button>
+      </div>
+      <Table grid={grid} />
     </div>
   );
 };
 
 const root = createRoot(document.getElementById("root"));
-root.render(<App />);
+root.render(<App />);

src/components/Table.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import TableRow from "./TableRow";
+
+const Table = ({ grid }) => {
+  return (
+    <table>
+      <tbody>
+        {grid.map((row, i) => (
+          <TableRow key={i} row={row} />
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
+

src/components/TableCell.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const TableCell = () => {
+  return (
+    <td
+      style={{
+        width: "30px",
+        height: "30px",
+        border: "1px solid black",
+      }}
+    ></td>
+  );
+};
+
+export default TableCell;
+

src/components/TableRow.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import TableCell from "./TableCell";
+
+const TableRow = ({ row }) => {
+  return (
+    <tr>
+      {row.map((_, i) => (
+        <TableCell key={i} />
+      ))}
+    </tr>
+  );
+};
+
+export default TableRow;
+