map two different arrays one within the other

Question

I have two different arrays in reactJS and want to map one inside the other.

Array calendar:

[
  {
     "week_number": 1,
     "from": "Wednesday May 1st 2019",
     "to": "Saturday May 4th 2019"
  },
  {
     "week_number": 2,
     "from": "Sunday May 5th 2019",
     "to": "Saturday May 11th 2019"
  },
  {
     "week_number": 3,
     "from": "Sunday May 12th 2019",
     "to": "Saturday May 18th 2019"
 },

]

And Array Rows:

[
  {
     "index": 1,
     "name": "job mzito",
     "date": "01/30/2019",
     "regno": "C027-01-1200/2016"
  },
 {
     "index": 2,
     "name": "Samwel Kamwana",
     "date": "01/30/2019",
     "regno": "C027-01-1879/2016"
  },
 {
     "index": 3,
     "name": "denis  mwaniki",
     "date": "02/03/2019",
     "regno": "C027-01-1256/2016"
  },

]

So, for every item in the calendar array I want to display the item's attributes together with all items in the rows array. But the map functions below return nothing. Any Help would be highly appreciated.

This is what I have so far:

<div className="content-section">
{calendar.map((period, index) => {
  {data.rows.map(row => 
      {
        return <p key={index}> Week: {period.week_number} Starting From: {period.from} To: {period.to}</p>
        return <p>{row.name}{row.date}{row.regno}</p>
      }
    )}                                     
})}
</div>

Answer 1

Your return statements are incorrectly places, you calendar data must be in the first map whereas rows in the second map

<div className="content-section">
    {calendar.map((period, index) => {
        return (
           <React.Fragment>
              <p key={index}> Week: {period.week_number} Starting From: {period.from} To: {period.to}</p>
              {data.rows.map(row => {
                  return <p>{row.name}{row.date}{row.regno}</p>
              })}
           </React.Fragment>     
        )                         
    })}
</div>