React native jsx in a nested map

Question

Need help with nested maps. Pretty confusing to figure out

      {
        sectorHeader.map((dutyPeriod) => (
          <Text style={Styles.heading} />
          dutyPeriod.dutyItems.map((dutyItem) => (
            <SectorCell
             flightNumber={`${dutyItem.flightLeg.scheduledFlightDesignator.airlineCode}${dutyItem.flightLeg.scheduledFlightDesignator.flightNumber}`}
             flightDate={dutyItem.flightLeg.departureTimes.scheduled.localTime}
            />
        ))))
      }

I get an error in the line "dutyPeriod.dutyItems.map((dutyItem) => (" because of the jsx in the previous line. How can i have a jsx when i have multiple maps?

Error that I get

Unexpected token, expected ,

{sectorHeader.map((dutyPeriod) => (
  <Text style={Styles.heading} />
   dutyPeriod.dutyItems.map((dutyItem) => (
   ^

Answer 1

surround js codes with {} in jsx codes:

{
dutyPeriod.dutyItems.map((dutyItem) => (
        <SectorCell
         flightNumber={`${dutyItem.flightLeg.scheduledFlightDesignator.airlineCode}${dutyItem.flightLeg.scheduledFlightDesignator.flightNumber}`}
         flightDate={dutyItem.flightLeg.departureTimes.scheduled.localTime}
        />
    ))
}