import React from "react";
import {
  Card,
  CardActions,
  CardContent,
  Button,
  CardMedia,
  Typography,
} from "@mui/material";
import ThumbUpAlt from "@mui/icons-material/ThumbUpAlt";
import Delete from "@mui/icons-material/Delete";
import MoreHoriz from "@mui/icons-material/MoreHoriz";
import moment from "moment";

import useStyles from "./styles";

const Post = ({ post }) => {

  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.media}
        image={post.selectedFile}
        title={post.title}
      >
        <div className={classes.overlay}>
          <Typography variant="h6">{post.creator}</Typography>
          <Typography variant="body2">
            {moment(post.createdAt).fromNow()}
          </Typography>
        </div>

// till here the card is showing

        <div className={classes.overlay2}>
          <Button style={{ color: "white" }} size="small" onClick={() => {}}>
            <MoreHoriz fontSize="default" />
          </Button>
        </div>

        <div className={classes.details}>
          <Typography variant="body2" color="textSecondary">
            {post.tags.map((tag) => `#${tag}`)}
          </Typography>
        </div>

        <CardContent>
          <Typography className={classes.title} variant="h5" gutterBottom>
            {post.message}
          </Typography>
        </CardContent>

        <CardActions className={classes.cardActions}>
          <Button size="small" color="primary" onClick={() => {}}>
            <ThumbUpAlt fontSize="small" />
            Like
            {post.likeCount}
          </Button>

          <Button size="small" color="primary" onClick={() => {}}>
            <Delete fontSize="small" />
            Delete
          </Button>
        </CardActions>
      </CardMedia>
    </Card>
  );
};
export default Post;

I'm passing data from parent to child as a prop.After this i'm mapping the prop in card.But the issue is card is only showing till classes.overlay afterwards nothing is showing.Also code is not showing in inspect.I don't know what the issue is as i'm new to MUI.

May i know what the issue is so that i can fix it

CodePudding user response：

Is because you are wrapping your component inside the CardMedia tags, when it should be a self-closing tag, so your code should look like this:

const Post = ({ post }) => {

  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.media}
        image={post.selectedFile}
        title={post.title}
      /> // <--- This is the change
        <div className={classes.overlay}>
          <Typography variant="h6">{post.creator}</Typography>
          <Typography variant="body2">
            {moment(post.createdAt).fromNow()}
          </Typography>
        </div>
        <div className={classes.overlay2}>
          <Button style={{ color: "white" }} size="small" onClick={() => {}}>
            <MoreHoriz fontSize="default" />
          </Button>
        </div>

        <div className={classes.details}>
          <Typography variant="body2" color="textSecondary">
            {post.tags.map((tag) => `#${tag}`)}
          </Typography>
        </div>

        <CardContent>
          <Typography className={classes.title} variant="h5" gutterBottom>
            {post.message}
          </Typography>
        </CardContent>

        <CardActions className={classes.cardActions}>
          <Button size="small" color="primary" onClick={() => {}}>
            <ThumbUpAlt fontSize="small" />
            Like
            {post.likeCount}
          </Button>

          <Button size="small" color="primary" onClick={() => {}}>
            <Delete fontSize="small" />
            Delete
          </Button>
        </CardActions>
    </Card>
  );
};
export default Post;