Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

251
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda