reactjs - pass props from multiple arrays in state

Question

I want to be able to map over too arrays, specifically the elementstomap array and the sortedScheduleData. As I am trying to pass props from both of those arrays into a component I want to be able to pass both sortedScheduleData and elementsToMap into the scheduleDataRow Component, just unsure how to do this. Much help would be appreciated!

I have removed code to make it easier to read

const schedules = () => {
 
  const [scheduleData, setScheduleData] = useState([])
  const [showScheduleModal, setShowScheduleModal] = useState(false)
  const [scheduleFieldData, setScheduleFieldData] = useState({})


  const sortedScheduleData = [].concat(scheduleData)
    .sort((a, b) => a.id < b.id ? 1 : -1)

  const elementsToMap = mapping.elements.filter(e => e.type === mapping.elementType).sort((x, y)=> mapping.sortElements(x, y))


  return (!scheduleData ? null :
    <PageWrapper title='Schedules'>

      <div style={{marginBottom: '20px'}}>
        <Button
          onClick={showModal}
          className='Button Dark Main'
          text='CREATE SCHEDULE'
        />
      </div>

      <div className='Card'>
        <div className='TableTopbar ScheduleGrid'>
          <div>ID</div>
          <div>Interval</div>
          <div>Project ID</div>
          <div>Database</div>
          <div>Create Timestamp</div>
          <div>Create User Id</div>
          <div>Edit</div>
        </div>

        {sortedScheduleData.map(schedule =>
          <ScheduleDataRow
            key={schedule.id}
            schedule={schedule}
            setScheduleData={setScheduleData}
            onScheduleFieldUpdate={onScheduleFieldUpdate}
            setScheduleFieldData={setScheduleFieldData}
            scheduleFieldData={scheduleFieldData}
            onDatabaseSelect={onDatabaseSelect}

          />
        )}
      </div>

      <ScheduleModal
        showScheduleModal={showScheduleModal}
        onCloseScheduleModal={onCloseScheduleModal}
        onScheduleFieldUpdate={onScheduleFieldUpdate}
        scheduleFieldData={scheduleFieldData}
        onSubmitTestingScheduleClick={onSubmitTestingScheduleClick}
        scheduleFieldData={scheduleFieldData}
        // onFieldUpdate={onFieldUpdate}
        onDatabaseSelect={onDatabaseSelect}
        database={database}
       />

    </PageWrapper>
  )
}

export default schedules

Answer 1

等待大神解答