How to populate the day title in month view with data from firestore

Question

In React-Big-Calendar, I am trying to set a title for the day in month view. My title data is set from a external component that uploads a date, and city name to firestore, and loads into my calandar component with componentDidMount into an array of objects called labels. I would like the labels object to compare dates, and apply the title to the day, but I do not understand how to connect the firestore object to the calendar.

I can console.log the firestore data and see it in the console, and i can manually set the title with an IF statement when I compare the RBC date, and a hard coded date. I have been looking for examples/info for WEEKS... any direction is helpful.

my calendar

<DnDCalendar
        localizer={localizer}
        defaultDate={new Date()}
        views={["day", "agenda", "work_week", "month", "week"]}
        defaultView={"month"}
        events={this.state.events}
        onEventDrop={this.moveEvent}
        resizable
        onEventResize={this.resizeEvent}
        selectable
        onSelectEvent={this.selectEvent}
        eventPropGetter={this.eventStyleGetter}
        style={{ height: "85vh" }}
        components={{
          month: {
            dateHeader: this.customDateHeader
          }
        }}
      />

componentDidMount

firebase
  .firestore()
  .collection("calLabel")
  .onSnapshot(snapshot => {
    let newLabels = [];
    snapshot.forEach(doc => {
      let label = doc.data();
      label.id = doc.id;
      newLabels.push(label);
      this.setState({
        labels: newLabels
      });
    });
  });

the customDateHeader component

 customDateHeader = ({ label, date, drilldownView, onDrillDown }) => {
    return (
      <div className='row p-0 m-0'>
        <div className='col-md-10 text-center p-0 mt-1'>City</div>
        <div className='col-md-2 p-0'>
          <button
            className='btn btn-sm btn-outline-primary font-weight-bold mt-1'
            onClick={onDrillDown}
          >
            {label}
          </button>
        </div>
      </div>
    );
  };

I have tried many different if statements..

if (moment(date) === moment(this.state.labels[0].labelDate.toDate())) {
return (
 jsx here...
)

would like to see the title populate with the city name if the dates match. Any direction or help is greatly appreciated as I have spent many days here.

Answer 1

After much searching, This works very well. I hope it helps someone else. Of course any refinements are appreciated! Cheers!

  customDateHeader = ({ label, date, drilldownView, onDrillDown }) => {
    if (this.state.labels) {
      let cityLabel = "";
      let dayLabels = this.state.labels;
      dayLabels.forEach(
        label => {
          if (label.labelDate.toDate().getTime() === date.getTime()) {
            cityLabel = label.locationName;
          }
        }
      );
      return (
        <div className='row p-0 m-0'>
          <div className='col-md-10 text-center p-0 mt-1'>{cityLabel}</div>
          <div className='col-md-2 p-0'>
            <button
              className='btn btn-sm btn-outline-primary font-weight-bold mt-1'
              onClick={onDrillDown}
            >
              {label}
            </button>
          </div>
        </div>
      );
    } else {
      return (
        <div className='row p-0 m-0'>
          <div className='col-md-10 text-center p-0 mt-1'>City</div>
          <div className='col-md-2 p-0'>
            <button
              className='btn btn-sm btn-outline-primary font-weight-bold mt-1'
              onClick={onDrillDown}
            >
              {label}
            </button>
          </div>
        </div>
      );
    }
  };