I have a component that shows multiple list names, and if you click to expand the collapsible item displaying the list name, all the ingredient names, ingredient amounts, and ingredient units part of that list are supposed to then display.
The object I am working with is the savedRecipes object, and I want to make lines listing every ingredient name, ingredient amount, and ingredient unit in the drop downs. It seems I need some nesting for this, but I cannot write the code correctly. The dropdowns appear empty.
This is the js file I have:
import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import {StyledDiv, StyledDiv2, StyledDiv3} from './GroceryList.styles.js';
import {styled} from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import {useState} from 'react';
import {MuiThemeProvider, createTheme} from '@material-ui/core/styles';
import {Card, CardMedia, CardContent, CardActions} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
const Accordion = styled((props) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({theme}) => ({
'border': `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
}));
const AccordionSummary = styled((props) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{fontSize: '0.9rem'}} />}
{...props}
/>
))(({theme}) => ({
'backgroundColor':
theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)',
'flexDirection': 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)',
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1),
},
}));
const AccordionDetails = styled(MuiAccordionDetails)(({theme}) => ({
padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)',
}));
export default function GroceryList2() {
const [expanded, setExpanded] = React.useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const textTheme = windowWidth >= 650 ? 'h6' : 'subtitle1';
const [savedRecipe, setSavedRecipe] = useState(
{
list1: [{
createdAt: "2022-03-05T08:00:00.000Z",
listName: "list1",
recipe: {
id: 642178,
image: "https://spoonacular.com/recipeImages/642178-556x370.jpg",
ingredients: [{
amount: 0.5,
name: "flour",
unit: "c"
}, {
amount: 0.5,
name: "whole wheat flour",
unit: "c"
}, {
amount: 1,
name: "sugar",
unit: "tbsp"
}, {
amount: 1,
name: "baking powder",
unit: "tsp"
}, {
amount: 0.25,
name: "baking soda",
unit: "tsp"
}, {
amount: 0.25,
name: "salt",
unit: "tsp"
}, {
amount: 1,
name: "ground flaxseed",
unit: "tbsp"
}, {
amount: 1,
name: "almond milk",
unit: "c"
}, {
amount: 2,
name: "cooking oil",
unit: "tbsp"
}],
nutrients: [{
amount: 68.36,
name: "Calories",
percentOfDailyNeeds: 3.42,
unit: "kcal"
}, {
amount: 3.12,
name: "Fat",
percentOfDailyNeeds: 4.8,
unit: "g"
}, {
amount: 0.23,
name: "Saturated Fat",
percentOfDailyNeeds: 1.46,
unit: "g"
}, {
amount: 9.1,
name: "Carbohydrates",
percentOfDailyNeeds: 3.03,
unit: "g"
}, {
amount: 1.07,
name: "Sugar",
percentOfDailyNeeds: 1.19,
unit: "g"
}, {
amount: 102.6,
name: "Sodium",
percentOfDailyNeeds: 4.46,
unit: "mg"
}, {
amount: 1.46,
name: "Protein",
percentOfDailyNeeds: 2.92,
unit: "g"
}, {
amount: 0.98,
name: "Fiber",
percentOfDailyNeeds: 3.93,
unit: "g"
}],
readyInMinutes: 45,
servings: 12,
sourceUrl: "https://www.foodista.com/recipe/DL8G33VY/egg-and-dairy-free-pancakes",
title: "Egg and Dairy Free Pancakes"
}
}],
list2: [{
createdAt: "2022-03-05T08:00:00.000Z",
listName: "list2",
recipe: {
id: 638086,
image: "https://spoonacular.com/recipeImages/638086-556x370.jpg",
ingredients: [{
amount: 1,
name: "cayennepepper",
unit: "dash"
}, {
amount: 1,
name: "chickenbreasts",
unit: "pound"
}, {
amount: 1.5,
name: "cornflakes",
unit: "cup"
}, {
amount: 1,
name: "eggwhite",
unit: ""
}, {
amount: 0.25,
name: "italianseasoning",
unit: "teaspoons"
}, {
amount: 0.25,
name: "paprika",
unit: "teaspoons"
}, {
amount: 2,
name: "parmesancheese",
unit: "teaspoons"
}, {
amount: 1,
name: "water",
unit: "Tablespoon"
}],
nutrients: [{
amount: 346.76,
name: "Calories",
percentOfDailyNeeds: 17.34,
unit: "kcal"
}, {
amount: 6.29,
name: "Fat",
percentOfDailyNeeds: 9.68,
unit: "g"
}, {
amount: 1.49,
name: "SaturatedFat",
percentOfDailyNeeds: 9.28,
unit: "g"
}, {
amount: 18.14,
name: "Carbohydrates",
percentOfDailyNeeds: 6.05,
unit: "g"
}, {
amount: 2.15,
name: "Sugar",
percentOfDailyNeeds: 2.39,
unit: "g"
}, {
amount: 457.72,
name: "Sodium",
percentOfDailyNeeds: 19.9,
unit: "mg"
}, {
amount: 51.78,
name: "Protein",
percentOfDailyNeeds: 103.56,
unit: "g"
}, {
amount: 0.9,
name: "Fiber",
percentOfDailyNeeds: 3.6,
unit: "g"
}],
readyInMinutes: 30,
servings: 2,
sourceUrl: "http://www.foodista.com/recipe/6GVTWWJ6/chicken-fingers",
title: "ChickenFingers"
}
}]
}
);
const handleChange = (panel) => (event, newExpanded) => {
setExpanded(newExpanded ? panel : false);
};
return (
<div>
{Object.keys(savedRecipe).map(function(key, index) {
return (
<Accordion expanded={expanded === key} onChange={handleChange(key)}>
<StyledDiv>
<StyledDiv2>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
<Typography>{key}</Typography>
</AccordionSummary>
</StyledDiv2>
<StyledDiv3 variant="contained" style={{backgroundColor: '#F7918C'}}>
<DeleteIcon style={{color: 'black'}} />
</StyledDiv3>
</StyledDiv>
<AccordionDetails>
{(savedRecipe[key]).map((obj) => {
{(obj.recipe.ingredients).map((line) => {
return
(
<Grid item xs="auto">
<Card sx={{
'maxWidth': 1000, '&:hover': {
'boxShadow': '3px 3px 3px #d9d9d9',
'cursor': 'pointer',
},
}}>
<CardContent>
<Typography variant={textTheme} color='#D24949' >
<Checkbox defaultUnchecked color="success" />
{line.name} - {line.amount} {line.unit}
</Typography>
</CardContent>
</Card>
</Grid>
);
})}
})}
</AccordionDetails>
</Accordion>
);
})}
<Button style={{position: 'fixed', bottom: 0, right: 0, height: '45px', width: '245px', textAlign: 'center'}} variant='contained' endIcon={<AddIcon />}>
Add new Grocery List
</Button>
</div>
);
}
This is my styles files so that the code works because I used some styled components
import styled from 'styled-components';
import Button from '@mui/material/Button';
import LongMenu from './AddToGroceryListMenu.js';
export const StyledDiv= styled.div`
display: flex;
flex-direction: row;
width: 100%;
`;
export const StyledDiv2 = styled.div`
position: static;
width: 95%;
@media screen and (max-width: 600px) {
width: 85%;
}
&:hover {
background-color: #D4D4D4;
}
`;
export const StyledDiv3 = styled(Button)`
position: static;
cursor: auto;
width: 5%;
background-color: #EA6A6A;
right: 0;
&:hover {
cursor: pointer;
}
@media screen and (max-width: 600px) {
width: 15%;
}
`;
// roughly: sm, small: 600px. md, medium: 900px. lg, large: 1200px. xl, extra-large: 1536px.
export const StyledLongMenu = styled(LongMenu)`
position: fixed;
top: 0;
`;