Estoy tratando de crear una tabla de 5x5 donde cada celda es un botón, usando React/JSX. Lo siguiente arroja un error en 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: Token inesperado (16:8) 14 | 15 | { > 16 | para (let=i; i<=5; i++){ | ^ 17 | hacerCelda(); 18 | } 19 | } navegador
Error de análisis: Token inesperado 14 | 15 | { > 16 | para (let=i; i<=5; i++){ | ^ 17 | hacerCelda(); 18 | } 19 | } (nulo)
¿Cuál es la forma más fácil y concisa de generar una tabla ZxZ en React? ¿Y podría explicar por qué este enfoque no funciona?
Enlace de Codesandbox: 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> ); };