Encountered comments is undefined error in react

32
November 21, 2020, at 10:20 PM

I'm trying to learn react I keep encountering this error while rendering the post dialog box in the website.


comments.js file:

  import React, { Component, Fragment } from 'react';
  import PropTypes from 'prop-types';
  import withStyles from '@material-ui/core/styles/withStyles';
  import { Link } from 'react-router-dom';
  import dayjs from 'dayjs';
  // MUI
  import Grid from '@material-ui/core/Grid';
  import Typography from '@material-ui/core/Typography';
  const styles = (theme) => ({
    ...theme,
    commentImage: {
      maxWidth: '100%',
      height: 100,
      objectFit: 'cover',
      borderRadius: '50%'
    },
    commentData: {
      marginLeft: 20
    }
  });
  class Comments extends Component {
    render() {
      const { comments, classes } = this.props;
      return (
      //Here is the error
        <Grid container>
            {comments.map((comment, index) => {
            const { body, createdAt, userImage, userHandle } = comment;
            return (
              <Fragment key={createdAt}>
                <Grid item sm={12}>
                  <Grid container>
                    <Grid item sm={2}>
                      <img
                        src={userImage}
                        alt="comment"
                        className={classes.commentImage}
                      />
                    </Grid>
                    <Grid item sm={9}>
                      <div className={classes.commentData}>
                        <Typography
                          variant="h5"
                          component={Link}
                          to={`/users/${userHandle}'}
                          color="primary"
                        >
                          {userHandle}
                        </Typography>
                        <Typography variant="body2" color="textSecondary">
                          {dayjs(createdAt).format('h:mm a, MMMM DD YYYY')}
                        </Typography>
                        <hr className={classes.invisibleSeparator} />
                        <Typography variabnt="body1">{body}</Typography>
                      </div>
                    </Grid>
                  </Grid>
                </Grid>
                {index !== comments.length - 1 && (
                  <hr className={classes.visibleSeparator} />
                )}
              </Fragment>
            );
          })}
        </Grid>
      );
    }
  }
  Comments.propTypes = {
    comments: PropTypes.array.isRequired
  };
  export default withStyles(styles)(Comments);

READ ALSO
How to find duplicates in mongoDB with two conditions

How to find duplicates in mongoDB with two conditions

I want to find duplicates in the MongoDB atlasI have seen examples for finding duplicates but they didn't take two conditions as I understand it

38
How to create a NPM command which executes a Go program?

How to create a NPM command which executes a Go program?

I have an NPM project (a React App) and want to execute a local go program by defining a command in the NPM packagejson

43
gulp.pipe() and src() not a function

gulp.pipe() and src() not a function

New to Gulp not sure what to do here I installed every dependency gulp, reactify and browserify

34
How to use promise.allSettled with typescript?

How to use promise.allSettled with typescript?

Typescript build is failing as it does not seem to like PromiseallSetttled even though I have set ts config comilerOptions with "lib": [ "ES2020

42