0
529
VistasCómo renderizar el componente MUI a través de For Loop en ReactJS
Espero que estés bien.
Estoy trabajando en un Calendario de Adviento/Caja de chocolate en ReactJS y estoy tratando de iterar sobre un bucle for para la cantidad de días en diciembre.
Tengo un problema para entender cómo enviarlo a mi contenedor en mi declaración de devolución.
Aquí está el código en texto real:
const Calendar = () => { // For Loop Here for each Day in December (31 Days) for (let days = 31; days < array.length; days++) { // Grid Item to Be Rendered for each Day <Grid item> <Box sx={{ width: 300, height: 300, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} /> </Grid>; } }; return ( <Grid container spacing={1}> {/* Want To Generate <Grid item> Here Through for Loop */} </Grid> );Quiero que me iteren más de 31 veces para calcular el total de días en diciembre y mostrarlo en mi declaración de devolución debajo del componente Grid. Intenté usar una matriz para insertar el elemento de cuadrícula y renderizarlo, pero no funcionó.
¿Alguna idea sobre cómo podría hacer esto?
Gracias por adelantado
2 Respuestas
Responde la pregunta0
Gracias a todos por tomarse su tiempo para ayudar, descubrí que este código a continuación funcionó a través de la referencia @jspcal a este enlace para obtener una respuesta más concisa: Reaccionar renderiza múltiples botones en bucle for desde un entero dado
Aquí está el código que escribí para que funcione:
// I added a constant 'box' and set an empty array const box = []; // I initiated days as 0 instead of 31 and if days are less than 31 then // for loop iterates over it until it reaches that number. for (let days = 0; days < 31; days++) { // Then the code pushes each time it loops to the empty array I initiated. box.push( <Grid item> <Box sx={{ width: 300, height: 300, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} /> </Grid> ); } return ( <Grid container spacing={1}> {/* And here I render the box array */} {box} </Grid> ); Y aquí hay una instantánea de mi código para mejores imágenes: 
¡Gracias una vez más a todos!
0
En React, se hace usando map . Consulte los documentos de reacción sobre la representación de varios componentes
<Grid container spacing={1}> {days.map((day) => { return (<Grid item key={day}> <Box sx={{ width: 300, height: 300, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} /> </Grid>) }) </Grid>