React.js error :TypeError: Cannot read property 'map' of undefined

Question

Currently trying to make a MERN Stack web app from this tutorial: https://youtu.be/aibtHnbeuio So I'am pretty new too the stack and don't know how to fix this... help plz

TypeError: Cannot read property 'map' of undefined Post C:/Users/I/Desktop/memories-pr/client/src/components/Posts/Post/Post.js:27

  24 |     </Button>
  25 | </div>
  26 | <div className={classes.details}>
> 27 |     <Typography variant="body2" color="textSecondary" component="h2">{post.tags.map((tag) => `#${tag} `)}</Typography>
     |   28 | </div>
  29 | <CardContent>
  30 |     <Typography className={classes.title}  variant="h5" gutterBottom > {post.message} </Typography>

(anonymous function) C:/Users/I/Desktop/memories-pr/client/src/actions/posts.js:8

 5 | try {
   6 |     const { data } = await api.fetchPosts();
   7 | 
>  8 |     dispatch({ type: 'FETCH_ALL', payload: data});
     | ^   9 | } catch (error) {
  10 |     console.log(error.message);
  11 | }

Answer 1

This might be caused by fetching post asynchronously, if that's the case then initially the value of post will remain undefined and you will be shown this error.

Use null propogation or conditional rendering to avoid this error:

<Typography 
    variant="body2" 
    color="textSecondary"    
   component="h2">
     {post?.tags?.map((tag) => `#${tag} `)}
</Typography>