Mapping over 2 arrays

Question

I have 2 arrays of objects: meeting and room and a Card component with some fields to be completed by them.

I tried to map over the arrays in order to access the elements from both of them at the same time but it returns the Card component six times(the number of the elements in the array of Room)

<div className="topCards">
    {room.map((dataObj) => {
        return (
            <div>
                {meeting.map((meetObject) => {
                    return (
                        <div className="item">
                            <Card3
                                className="card3"
                                teamName={meetObject.name}
                                roomName={dataObj.name}
                                time={dataObj.time}
                                data={dataObj.data}
                                capacity={dataObj.capacity}
                            />
                        </div>
                    );
                })}
            </div>
        );
    })}
</div>

So, my question is how can I return the Card element with elements from both cards

Answer 1

What let you think that it would work like that?

Just use the index parameter of Array.prototype.map

<div className="topCards">
  <div>
    {meeting.map((meetObject, i) => {
      return (
        <div className="item">
          <Card3
            className="card3"
            teamName={meetObject.name}
            roomName={dataObj[i].name}
            time={dataObj[i].time}
            data={dataObj[i].data}
            capacity={dataObj[i].capacity}
          />
        </div>
      );
    })}
  </div>
</div>