Rendering React Components By Date Order

Question

I have to render a series of events occurring based on date connected to a calendar library. I'm using Redux/thunk to bring an index of all event objects to frontend.

I filter the events out based on searchbar value, and the current date selected on calendar as per below.

import moment from 'moment'

function filterEvents (events, searchValue, selectedDay) {
    const fixedSearchValue = searchValue.toLowerCase()
    const fixedSelectedDate = moment(calendarDateFormatter(selectedDay))
    return events.filter(event => {
        let eventTitle, eventDate, fixedEventDate, displayEventDate
        eventTitle = event.title.toLowerCase()
        eventDate = event.start_date
        fixedEventDate = moment(eventDate)
        displayEventDate = fixedEventDate.format("dddd, MMMM D")
        if ((searchValue === "" || eventTitle.includes(fixedSearchValue))
            && fixedEventDate.isAfter(fixedSelectedDate)) {
            event["fixedDate"] = fixedEventDate
            event["displayDate"] = displayEventDate
            return true
        } else {
            return false
        }
    })
}

function calendarDateFormatter(selectedDay) {
    return selectedDay.year + "-" + selectedDay.month + "-" + selectedDay.day
}

I then sort the resulting events in date order using the following:

function sortEventsByDate (filteredEvents) {
    return filteredEvents.sort((event1, event2) => (
        dateComparer(event1, event2))
    )
}

function dateComparer (event1, event2) {
    let eventOneDate, eventTwoDate
    eventOneDate = event1.fixedDate
    eventTwoDate = event2.fixedDate
    return eventOneDate.isAfter(eventTwoDate) ? 1 : -1
}

I now have an array of event items that are sorted based on date/time. Then I tried to extract all unique dates for the current events (in date order), render the date as a parent component that'll list its corresponding events (as child components) that matches the date in time order. Then it'll be the next date with its corresponding events, and so on.

How can I go about this in a clean / scalable / time complexity efficient way? I've tried to create a function that will create an object, iterate through the array of sorted events, use its date as string as keys, and an array of events that match the date key as values, and use this as props to the date parent component. However, the object keys does not save in the same order they were iterated through in the array. This results in unordered date/corresponding events. Please advise!

Answer 1

You can use a combination of Array.filter and Array.map

const getFilteredRenderedNodes = (list) => list
  .filter(item => item.date === someDate)
  .map(item => (
    <div key={item.id}>{item.date}</div>
  ));

Using Array.filter iterates the array and finds matching items by the criteria item.date === someDate . This is a replaceable criteria, but it's what you use to select a subset of items from the list.

Using Array.map returns an array of React.ReactNode , or jsx, which React interprets and renders. The render method includes a key field which must be unique so that React knows which node to update and render and handle events.

You then consume with:

return (
  <SomeComponent>
    {getFilteredRenderedNodes(myItemList)}
  </SomeComponent>
);

Where myItemList is your list of items.