title: Mapping over 2 arrays
body: <p>I have 2 arrays of objects: <code>meeting</code> and <code>room</code> and a <code>Card</code> component with some fields to be completed by them.</p>
  <p>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 <code>Card</code> component six times(the number of the elements in the array of Room)</p>
  <pre><code>&lt;div className=&quot;topCards&quot;&gt;
      {room.map((dataObj) =&gt; {
          return (
              &lt;div&gt;
                  {meeting.map((meetObject) =&gt; {
                      return (
                          &lt;div className=&quot;item&quot;&gt;
                              &lt;Card3
                                  className=&quot;card3&quot;
                                  teamName={meetObject.name}
                                  roomName={dataObj.name}
                                  time={dataObj.time}
                                  data={dataObj.data}
                                  capacity={dataObj.capacity}
                              /&gt;
                          &lt;/div&gt;
                      );
                  })}
              &lt;/div&gt;
          );
      })}
  &lt;/div&gt;
  </code></pre>
  <p>So, my question is how can I return the Card element with elements from both cards</p>