How to iterate through an array inside an array.map function?

Question

I am trying to iterate an array inside another loop in my react app. I have a json file that contains data that looks like this:

[
    {
        "id":"0001",
        "photos":[
            "IMG_9239.JPG",
            "2019-01-07.jpg",
            "IMG_9261.JPG"
        ]
    },
    {
        "id":"0002",
        "photos":[
            "IMG_9239.JPG",
            "2019-01-07.jpg",
            "IMG_9261.JPG"
        ]
    },
    {
        "id":"0003",
        "photos":[
            "IMG_9239.JPG",
            "2019-01-07.jpg",
            "IMG_9261.JPG"
        ]
    }
]

And this is my react component:

const ListItems = ({data}) => {
    return (
        <div id="items-container">
            {data.map( item => (
                <p>{item.id}</p>
                //iterate the [photos] array in an img tag
                //<img src ="photo" />
            ))}
        </div>
    )

}

I am trying {item.photos.map....} but it seems like it's not a valid syntax. Can you please help?

Can you show the error?

Trí Phan
– Trí Phan

2020-05-05 03:16:28 +00:00
Commented May 5, 2020 at 3:16 — Trí Phan
– Trí Phan, Commented May 5, 2020 at 3:16
Unexpected token, expected ","

Blueboye
– Blueboye

2020-05-05 03:19:10 +00:00
Commented May 5, 2020 at 3:19 — Blueboye
– Blueboye, Commented May 5, 2020 at 3:19

CertainPerformance · Accepted Answer · 2020-05-05 03:19:10Z

3

Multiple JSX elements require a parent, or at least a psuedo-parent. Here, you can use a fragment <> as the parent of what gets returned from the .map callback, enclosing both the <p> and the <img>s:

const ListItems = ({data}) => {
    return (
        <div id="items-container">
            {data.map( item => (
                <>
                    <p>{item.id}</p>
                    {item.photos.map(({ src }) => <img src={src}></img>}
                </>
            ))}
        </div>
    )
}

answered May 5, 2020 at 3:19

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to iterate through an array inside an array.map function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related