comment.js

import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import Divider from "@mui/material/Divider";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";

export default function commentList(props) {

  const { userComs } = props;

  if (userComs.length > 0) {
    
    return  userComs.map((val)  => {
      
      return (
        <div key={val}>
        <List
          sx={{ width: "100%", maxWidth: 360, bgcolor: "#f1ecec" }}
        >
          
          <ListItem alignItems="flex-start">
            <ListItemAvatar>
              <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            </ListItemAvatar>
            <ListItemText
              secondary={
                <React.Fragment>
                  <Typography
                    sx={{ display: "inline" }}
                    component="span"
                    variant="body2"
                    color="text.primary"
                    style={{ marginRight: '1em' }}
                  >
                    Ali Connors
                  </Typography>
                  {val}
                </React.Fragment>
                
              }
              
            />
          </ListItem>
          <Divider variant="inset" component="li" />
        </List>
        </div>
      );
      
    });
  } else {
    return <div></div>;
  }

}