Answers for "How to have nested loops with map in JSX?"

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;