text: import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import List from '@material-ui/core/List';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
  import ListItemText from '@material-ui/core/ListItemText';
  import ListItemAvatar from '@material-ui/core/ListItemAvatar';
  import RateReviewOutlinedIcon from '@material-ui/icons/RateReviewOutlined';
  
  const useStyles = makeStyles((theme) => ({
    root: {
      width: '100%',
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
    },
  }));
  
  export default function Grades(props) {
    const classes = useStyles();
    const [checked, setChecked] = React.useState([1]);
  
    const handleToggle = (value) => () => {
      const currentIndex = checked.indexOf(value);
      const newChecked = [...checked];
  
      if (currentIndex === -1) {
        newChecked.push(value);
      } else {
        newChecked.splice(currentIndex, 1);
      }
  
      setChecked(newChecked);
    };
  
    return (
      <List dense className={classes.root}>
        {props.grades.map((value) => {
          const labelId = `checkbox-list-secondary-label-${value}`;
          return (
            <ListItem key={value} button>
              <ListItemAvatar>
                <RateReviewOutlinedIcon />
              </ListItemAvatar>
              <ListItemText id={labelId} primary={value.student} />
              <ListItemSecondaryAction>
                <strong>{value.solution.grade}</strong>
              </ListItemSecondaryAction>
            </ListItem>
          );
        })}
      </List>
    );
  }