reactjs - Dynamic data are not rendering on the browser

Question

Good day, I'm trying to create a MEARN stack application with react-redux. I am already able to post data to my MongoDB atlas, and I am also able to fetch the data and console.log it. But when I try to render the data to my front end the browser returns an empty page. I would like to know what is causing this issue. This is my first time creating a react application.

import './Experience.css';

import Post from './Posts/Post';

import { Grid, CircularProgress  } from '@material-ui/core';
import { useSelector } from 'react-redux';

function Experience() {
  const posts = useSelector((state) => state.posts);
  console.log(posts); //Logged my data on DevTool -> Console (see image below)
  return (
    !posts.length ? <CircularProgress /> : (
      <Grid container alignItems="stretch" spacing={3}>
        Test //view browser
        {posts.map((post) => (
          <Grid key={post._id} item xs={3} >
            <Post post={post} />
          </Grid>
        ))}
      </Grid>
    )
  );
}

export default Experience;

import React from 'react';

 import { Card, CardActions, CardContent, CardMedia, IconButton, Typography, CardHeader, Avatar } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const Post = ({ post }) => {
    return (
        <Card>
            <CardMedia image={post.companyLogo} />
            <CardHeader
                avatar={
                <Avatar aria-label="recipe">
                    <img href={post.employerImage}/>
                </Avatar>
                }
                action={
                <IconButton aria-label="settings">
                    <MoreVertIcon />
                </IconButton>
                }
                title={post.employerName}
                subheader={post.jobTitle}
            />
            <CardContent>
            <Typography variant="body2" color="textSecondary" component="p">{post.responsibility.map((tag) => `???${tag} `)}</Typography>
            </CardContent>
            <CardActions>
                <Typography variant="body2" color="textSecondary" component="p">{post.employedDate}</Typography>
            </CardActions>
        </Card>
    );
}

export default Post;

question from:https://stackoverflow.com/questions/66068136/dynamic-data-are-not-rendering-on-the-browser

Answer 1

Since you are getting response from the db, there must be a rendering error. From a quick look I see that you have missused the Avatar component.

It should be like: <Avatar alt="recipe" src={post.employerImage} />

or if you want to utilize the children prop, img tag takes src not href:

<Avatar aria-label="recipe">
    <img src={post.employerImage}/>
</Avatar>