Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

252
Vistas
Mapping through Array to create Material UI Table, inside another Array

i am having a nightmare with something really basic.

I have created a page that renders some recipes, 7 in fact for each day of the week, as a generator.

This works fine on medium sized screens and above, buit as the table is horizontal it formats horribly. So what i though best to do was to convert it so that the days of the week are represented as a cell in the row. I just can't wrap my head around the best way of doing it. So far i have this:

const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

     {props.recipes.map((recipe) => (
                <TableRow component="th" scope="recipes">
                    {weekdays.map((weekday) => (
                        <TableCell>{weekday}</TableCell>))}


                    <Link href={`/recipes/${recipe.key}`} passHref>
                        <Card elevation={3} sx={{ maxWidth: 300 }}>
                            <CardActionArea>
                                <CardHeader
                                    titleTypographyProps={{ fontWeight: "Bold" }}
                                    title={recipe.title}
                                    subheader={recipe.description}
                                />

                                <CardMedia
                                    component="img"
                                    height="194"
                                    image={recipe.image ? recipe.image : "/assets/comingsoon.jpg"}
                                    alt="Food"
                                />
                            </CardActionArea>
                        </Card>
                    </Link>



                </TableRow>

Each recipe takes up a new row which is the preferred outcome, but i cannot get a cell to be created next to each respective recipe that has the respective day of the week

I created an array called weekdays and thought i could itterate through it somehow, but so far it just adding every value to each cell. I reckon this is something so simple but 8 hours has about killed me on it. Have attached a screenshot of current outcome based on code aboveCurrently how it looks

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda