Map 2 arrays of object to make a loop

Question

I have these codes

    import React, { Component } from 'react'
    import './RightContent.css'

    class RightContent extends Component {
    render() {
    const albumdata = this.props.albumdata;
    const albumthumbnail = this.props.albumthumbnail;
    return (

        <div class="content2">
        {albumthumbnail.map(data => (

            <div class="albumcontainer">
                <div class="albumitem">
                    <img src={data.url}></img>
                    <div class="description">{data.title}</div>
                </div>  
           </div>

        ))}
        </div>

    );
}

The problem is that I would to make a loop of album item with image and title, the albumdata contains titles of the albums, while albumthumbnail holds the first image of the album, but I can't do the map below the albumthumbnail.map .

I would like to make a loop in div to display albums with details coming from two arrays of objects. But it seems impossible.

Do you need to get data from the exact same index of both arrays? Ie, pairing up albumData[0] with albumThumbnail[0], and albumData[1] with albumThumbnail[1], etc? — Nicholas Tower
– Nicholas Tower, Commented Dec 13, 2018 at 2:00
albumdata contains the array of objects such as title, id while albumthumbnail contains array of objects such as id, title of photos, url, thumbnailurl — Thang Ho Minh
– Thang Ho Minh, Commented Dec 13, 2018 at 2:07

Nicholas Tower · Accepted Answer · 2018-12-13 02:04:26Z

1

The function that you pass into map actually gets more than just one parameter passed to it. The second parameter is the index. So you can use that to grab the corresponding value from your other array.

albumthumbnail.map((thumbnail, index) => (
  // Do something with thumbnail, and also something with albumdata[index]
))

I'm assuming the two arrays are exactly the same length; if they aren't you'll need some more safeguards.

answered Dec 13, 2018 at 2:04

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

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

Comments

Thang Ho Minh · Accepted Answer · 2018-12-13 02:26:25Z

0

I have done thanks to your answer. Thanks to the 2nd parameter that I could do it!

return (
            <div class="content2">
            {albumthumbnail.map((data, index) => (
                <div class="albumcontainer">
                    <div class="albumitem">
                        <img src={data.thumbnailUrl}></img>
                        <button class="description" onclick="showDetail()">{albumdata[index].title}</button>
                    </div>  
               </div> 
            ))}
            </div>

        );

answered Dec 13, 2018 at 2:26

Thang Ho Minh

132 bronze badges

Collectives™ on Stack Overflow

Map 2 arrays of object to make a loop

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