Estoy tratando de crear una tabla que cambie dinámicamente. El número de sus columnas cambia según el número de días del mes (28, 29, 30 o 31).
Creé la tabla manualmente (pero el número de columnas está fijo en 31):
https://i.stack.imgur.com/pAvPu.png
Aquí está el componente en el que intenté seleccionar la cantidad de columnas manualmente según la cantidad de días del mes actual (28,29,30,31), no muestra nada en el navegador:
const Test = () => { // Number of days in the current month function daysInCurrentMonth() { var now = new Date(); return new Date(now.getFullYear(), now.getMonth()+1, 0).getDate(); } let a = daysInCurrentMonth(); return ( <div> <table> <tbody> <tr> {() => { for(let i=1;i<=a;i++){ <td>{i}</td> } }} </tr> </tbody> </table> </div> ); } export default Test;¿Cómo puedo usar un bucle for dentro de este código?
Debe devolver los td's de la función que está escribiendo en JSX y llamar a la función también de esta manera:
return ( <div> <table> <tbody> <tr> {(() => { let td = []; for (let i = 1; i <= a; i++) { td.push(<td key={i}>{i}</td>); } return td; })()} </tr> </tbody> </table> </div> );Una forma más eficiente de representarlo es extraer la función fuera del JSX:
function daysInCurrentMonth() { var now = new Date(); return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); } let a = daysInCurrentMonth(); const renderTD = () => { let td = []; for (let i = 1; i <= a; i++) { td.push(<td key={i}>{i}</td>); } return td; }; return ( <div> <table> <tbody> <tr>{renderTD()}</tr> </tbody> </table> </div> ); Si desea eliminar la función renderTD , puede crear una nueva matriz de longitud a , pero supongo que no es un método muy eficiente para hacerlo.
function daysInCurrentMonth() { var now = new Date(); return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); } let a = daysInCurrentMonth(); return ( <div> <table> <tbody> <tr> {[...Array(a).fill(0)].map((_, i) => ( <td key={i}>{i + 1}</td> ))} </tr> </tbody> </table> </div> );El bloque de código dentro de su JSX no genera ningún valor.
Intenta reemplazar
{() => { for(let i=1;i<=a;i++){ <td>{i}</td> } }}por algo como:
Array(a).keys().map((i) => <td>{i-1}</td>) Puede haber formas más inteligentes que Array(a).keys() para generar el rango de valores que necesita.
Mejor deberías usar map().
Asegúrate de tener tu i como una matriz:
i.map(elem -=> { return <td>elem</td> })