I am trying to develop a new app in React, where I display on a Fullcalendar, working shifts. I get the data from an endpoint and then I want to dynamically pass them into the events and resources of the FullCalendar.io. The response is populated with strings and arrays.

I figured out how Fullcalendar.io maps events to resources (resourceId:). Now I want to map the response to the corresponding fields in events and resources. I have done this to render some results to a list :

shiftData.map((id) => <option key={shiftData.ShiftId} value={shiftData.ShiftId}> {shiftData.ShiftId} </option>)

I want to do the same for the Events and Resources in Fullcalendar.io and I am trying to figure out a way to do so dynamically.

 resources={[
               { 
                  id: `${shiftData.DisplayName }`,
                  resourceId:  'Name Surname',
                  building: ` ${shiftData.JobTitle}`,
                  title: ` ${shiftData.DisplayName }`,
                  businessHours: {
                  startTime:  shiftData[0].StartDateTime,
                  endTime: shiftData[0].EndDateTime
                  }
               }
}]
  events={[
          {  
             title: ` ${shiftData.DisplayName }`, 
             resourceId: ` ${shiftData.DisplayName === 'Name Surname'}`, 
             start: shiftData[0].ShiftCheckIn,
             end: shiftData[0].ShiftCheckOut
         }

So what i did in the above sample, is check for the name of the employee and map it with a hardcoded resource. But that doesn't work obviously. That is what I am trying to figure out. How can I map dynamically data. Note that when I indicate the array position [0], I can get the results but I want to do it dynamically, for all objects/properties in the response.

Thank you in advance!