How to have nested loops with map in JSX?
import exercises from "../Exercises/exercises.js"; // data source
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
let exercises = [
{ arms : [ "bicep curl" , "lat pull down"] },
{ legs : ["squat" , "barbell squat"] },
{ chest : [ "benchpress" , "incline benchpress"] } ,
{ back : ["pull up" , "weighted pull up"] }
]
const Left = (props) => (
// implicit return
<Box sx={{ width: '100%' , display: { } }}>
{
exercises.map( (obj) => {
let muscle = Object.keys(obj)[0]; // curr muscle
let exerciseArr = Object.values(obj)[0]; // exercise array for curr muscle
{console.log(muscle)} // works --> thus variable is not the problem
return (
<>
<Box>
<Typography> {muscle}</Typography>
</Box>
<List>
{
exerciseArr.map( (exercise) => {
console.log(exercise) // works --> thus variable is not the problem
return (
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Trash"> {exercise } </ListItemText>
</ListItemButton>
</ListItem>
)
})
}
</List>
</>
)
})}
</Box>
);
export default Left;