score:2

Accepted answer

NOTE: I would have commented but I do not have enough reputation.

The Issue with the code you provided is that you do not return anything from your mapping function.

      {comments.comments_images.map((child,i) =>{
        <div key={i}>
          <img src={child.s3_url} className={classes.magetty} />
        </div>
      })}

Instead

      {comments.comments_images.map((child,i) =>{
        return (
          <div key={i}>
            <img src={child.s3_url} className={classes.magetty} />
          </div>
        )
      })}

Also If do not loop over all your comments first you might have issues also. Make sure you map over the comments array then you map again over the comments_images. Because your current implementation of the map is comments.comments_images while comments is an Array.

score:2

The map function is not returning anything.

Try the below code...

<Grid className={classes.gridList}>
    {comments.comments_images.map((child, i) => (
        <div key={i}>
            <img src={child.s3_url} className={classes.magetty} />
        </div>
    ))}
</Grid>

or

<Grid className={classes.gridList}>
    {comments.comments_images.map((child, i) => {
        return <div key={i}>
            <img src={child.s3_url} className={classes.magetty} />
        </div>
    })}
</Grid>

Related Query

More Query from same tag