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;