1

I'm new to React and frontend development. My objective is to let <img src={child.s3_url} className={classes.magetty} /> to work successfully in the map(), and I hope there are many pictures on the page. However, images do not show correctly on the page (only blank space in the view), and I use console.log('child.s3_url: ', child.s3_url) to make sure that the map() has already been fired. Could anyone tell me what is the solution to this problem? Thank you very much!

My code is here:

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

          })}
 </Grid>

Data looks like this:

"comments": [
            {
                "id": 4,
                "trail_id": 4,
                "date": "2009-02-05",
                "star": 4,
                "difficulty": 3,
                "comments_images": [
                    {
                        "comment_id": 1,
                        "tag_id": 1,
                        "s3_url": "https://justForTestUrl/imgs/1.jpg"
                    },
                    {
                        "comment_id": 2,
                        "tag_id": 2,
                        "s3_url": "https://justForTestUrl/imgs/2.jpg"
                    },
                    {
                        "comment_id": 3,
                        "tag_id": 3,
                        "s3_url": "https://justForTestUrl/imgs/3.jpg"
                    },
                ]
            },
        ...
          ],
Ching-Hang Hsu
  • 70
  • 1
  • 1
  • 7
  • 1
    You need to `return` that JSX inside the `map` callback. Note that this would happen implicitly if you use `(...)` in place of `{...}` for the function body. – Robin Zigmond Apr 11 '21 at 15:17

2 Answers2

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>
Wazeed
  • 1,230
  • 1
  • 8
  • 9
2

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.

Kerosz
  • 168
  • 6