React array.map bug

Question

Hi I have a problem with array.map in react

export default function CardMakerForCompanies() {
const data = [{img: 'https://play-lh.googleusercontent.com/YFpMBVjnTFQ9D7ln9jOPDxCwTf_AUPgNU0Tz8uskVP-0Esj_5jqBDpqcPm0LwDpcLA', name: 'Company Name(getting from db)', desc: 'Company Description(getting from db, Max chars. 50) \\\ Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum'}];

const classes = useStyles();
 
return(
      <>
      data.map((e) => {
          <Card className={classes.root}>
            <CardActionArea>
              <CardMedia
                className={classes.media}
                image={e.img}
                title="logo"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                 {e.name}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                 {e.desc}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size="small" color="primary">
                More Info
              </Button>
            </CardActions>
          </Card>
        });
      </>
    );
}

I want It to return cards with name, desc, and imagebut it reruens some error

  Line 35:26:  'e' is not defined  no-undef
  Line 40:21:  'e' is not defined  no-undef
  Line 43:21:  'e' is not defined  no-undef

If there are any questions write

Abishek Kumar · Accepted Answer · 2020-11-06 13:20:05Z

Add Curley braces to be read as js and not html.

export default function CardMakerForCompanies() {
const data = [{img: 'https://play- 
lh.googleusercontent.com/YFpMBVjnTFQ9D7ln9jOPDxCwTf_AUPgNU0Tz8uskVP- 
0Esj_5jqBDpqcPm0LwDpcLA', name: 'Company Name(getting from db)', desc: 
'Company Description(getting from db, Max chars. 50) \\\ Lorem Ipsum Lorem 
 Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum'}];

const classes = useStyles();

return(
  <>
  {data.map((e) => {
      return <Card className={classes.root}>
        <CardActionArea>
          <CardMedia
            className={classes.media}
            image={e.img}
            title="logo"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
             {e.name}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
             {e.desc}
            </Typography>
          </CardContent>
        </CardActionArea>
        <CardActions>
          <Button size="small" color="primary">
            More Info
          </Button>
        </CardActions>
      </Card>
    });
  }
  </>
);

}

Aadil Mehraj · Accepted Answer · 2020-11-06 13:18:16Z

Make sure you return before Card jsx in the map:

return(
      <>
      data.map((e) => {
          return <Card className={classes.root}>
            <CardActionArea>
              <CardMedia
                className={classes.media}
                image={e.img}
                title="logo"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                 {e.name}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                 {e.desc}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size="small" color="primary">
                More Info
              </Button>
            </CardActions>
          </Card>
        });
      </>
    );
}

Collectives™ on Stack Overflow

React array.map bug

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related