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