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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…