I'm trying to create a 5x5 table where each cell is a button, using React/JSX. The below throws an error in SandBox:
import "./styles.css";
import React from "react";
const makeCell = () => {
return (
<td>
<button/>
</td>
)
};
const makeRow = () => {
return(
<tr>
{
for (let=i; i<=5; i++){
makeCell();
}
}
</tr>
)
};
const makeTable = () => {
return(
<table>
{
for (let=i; i<=5; i++){
makeRow();
}
}
</table>
)
};
export default function App() {
return (
<div>
<makeTable/>
</div>
);
}
/src/App.js: Unexpected token (16:8) 14 | 15 | { > 16 | for (let=i; i<=5; i++){ | ^ 17 | makeCell(); 18 | } 19 | } browser
Parsing error: Unexpected token 14 | 15 | { > 16 | for (let=i; i<=5; i++){ | ^ 17 | makeCell(); 18 | } 19 | } (null)
What is the easiest and most concise way to generate an ZxZ table in React? And could you explain why this approach isn't working?
Codesandbox link: https://codesandbox.io/s/amazing-frog-c5h6hv?file=/src/App.js
export default function App() {
return (
<Table />
);
}
const Table = () => {
return (
<table>
<tbody>
{Array(5)
.fill(null)
.map((_, index) => (
<Row key={index} />
))}
</tbody>
</table>
);
};
const Row = () => {
return (
<tr>
{Array(5)
.fill(null)
.map((_, index) => (
<Cell key={index} />
))}
</tr>
);
};
const Cell = () => {
return (
<td>
<button>hello</button>
</td>
);
};