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