Despite having an image prop in CardMedia, I kept encountering this error.
Here is a snippet of the code:
Error description:
const Post = ({ post, setter }) => {
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>
<div className={classes.overlay2}>
<Button style={{color:'white'}} size='small' onClick={() => setter(post._id)}>
<MoreHorizIcon fontSize='medium' />
</Button>
</div>
<div className={classes.details}>
<Typography variant='body2' color='textSecondary' >{post.tags.map((tag) => `#${tag} `)}</Typography>
</div>
<Typography className={classes.title} variant='h5' gutterBottom>{post.title}</Typography>
<CardContent>
<Typography variant='h5' gutterBottom>{post.message}</Typography>
</CardContent>
<CardActions>
<Button size='small' color='primary' onClick={() => {}}>
<ThumbUpAltIcon fontSize='small' />
like
{post.likeCount}
</Button>
<Button size='small' color='primary' onClick={() => {}}>
<DeleteIcon fontSize='small' />
Delete
</Button>
</CardActions>
</Card>
);
}
I am currently learning full stack development and following a tutorial by JSMastery. This error has left me puzzled. Any guidance or suggestions on how to resolve it would be greatly appreciated. If you require additional information, please feel free to comment below.