title: Having trouble mapping existing events from the database in react fullcalendar
body: <p>I am having trouble in mapping database columns with the event fields to display. I am trying to add my get call inside Util.</p>
  <pre><code>----Event.jsx-----
  import React from &quot;react&quot;;
  import FullCalendar, { formatDate } from &quot;@fullcalendar/react&quot;;
  import dayGridPlugin from &quot;@fullcalendar/daygrid&quot;;
  import timeGridPlugin from &quot;@fullcalendar/timegrid&quot;;
  import interactionPlugin from &quot;@fullcalendar/interaction&quot;;
  import { INITIAL_EVENTS, createEventId } from &quot;./Util&quot;;
  
  export default class EventCalander extends React.Component {
    state = {
      weekendsVisible: true,
      currentEvents: [],
    };
  
  
    render() {
      return (
        &lt;div className=&quot;demo-app&quot;&gt;
          {this.renderSidebar()}
          &lt;div className=&quot;demo-app-main&quot;&gt;
            &lt;FullCalendar
              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
              headerToolbar={{
                left: &quot;prev,next today&quot;,
                center: &quot;title&quot;,
                right: &quot;dayGridMonth,timeGridWeek,timeGridDay&quot;,
                
              }}
              initialView=&quot;timeGridWeek&quot;
              editable={true}
              selectable={true}
              selectMirror={true}
              dayMaxEvents={true}
              weekends={this.state.weekendsVisible}
              initialEvents={ INITIAL_EVENTS } // alternatively, use the `events` setting to fetch from a feed
              select={this.handleDateSelect}
              eventContent={renderEventContent} // custom render function
              eventClick={this.handleEventClick}
              eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
              /* you can update a remote database when these fire: 
              eventAdd={async function()}
              eventChange={function()}
              eventRemove={function() }*/
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    renderSidebar() {
      return (
        &lt;div className=&quot;demo-app-sidebar&quot;&gt;
           &lt;div className='demo-app-sidebar-section'&gt;
              &lt;h2&gt;Instructions&lt;/h2&gt;
              &lt;ul&gt;
                &lt;li&gt;Select dates and you will be prompted to create a new event&lt;/li&gt;
                &lt;li&gt;Drag, drop, and resize events&lt;/li&gt;
                &lt;li&gt;Click an event to delete it&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt; 
          &lt;div className=&quot;demo-app-sidebar-section&quot;&gt;
             &lt;label&gt;
                &lt;input
                  type='checkbox'
                  checked={this.state.weekendsVisible}
                  onChange={this.handleWeekendsToggle}
                &gt;&lt;/input&gt;
                toggle weekends
              &lt;/label&gt; 
          &lt;/div&gt;
          &lt;div className=&quot;demo-app-sidebar-section&quot;&gt;
            &lt;h2&gt;All Events ({this.state.currentEvents.length})&lt;/h2&gt;
            &lt;ul&gt;{this.state.currentEvents.map(renderSidebarEvent)}&lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    handleWeekendsToggle = () =&gt; {
      this.setState({
        weekendsVisible: !this.state.weekendsVisible,
      });
    };
  
    handleDateSelect = (selectInfo) =&gt; {
      let title = prompt(&quot;Please enter a new title for your event&quot;);
      let calendarApi = selectInfo.view.calendar;
  
      calendarApi.unselect(); // clear date selection
  
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay,
        });
      }
    };
  
    handleEventClick = (clickInfo) =&gt; {
      if (
        confirm(
          `Are you sure you want to delete the event '${clickInfo.event.title}'`
        )
      ) {
        clickInfo.event.remove();
      }
    };
  
    handleEvents = (events) =&gt; {
      this.setState({
        currentEvents: events,
      });
    };
  }
  
  function renderEventContent(eventInfo) {
    return (
      &lt;&gt;
        &lt;b&gt;{eventInfo.timeText}&lt;/b&gt;
        &lt;i&gt;{eventInfo.event.title}&lt;/i&gt;
      &lt;/&gt;
    );
  }
  
  function renderSidebarEvent(event) {
    return (
      &lt;li key={event.id}&gt;
        &lt;b&gt;
          {formatDate(event.start, {
            year: &quot;numeric&quot;,
            month: &quot;short&quot;,
            day: &quot;numeric&quot;,
          })}
        &lt;/b&gt;
        &lt;i&gt;{event.title}&lt;/i&gt;
      &lt;/li&gt;
    );
  }
       
  </code></pre>
  <p>This is where I am making a get call. I am trying to replace hardcoded events in INITIAL_EVENTS and replace them with the values in the database but I'm not able to map the database values with the event attributes.</p>
  <pre><code>-----Util.js-----
  let eventGuid = 129;
  let todayStr = new Date().toISOString().replace(/T.*$/, &quot;&quot;); // YYYY-MM-DD of today
  
  initialEvents ={
    async function() {
      const response = await fetch(
      &quot;http://localhost:2999/getall&quot;);
      const data = await response.json();
      console.log(data.length);
      console.log(data);
    }
  }
  export const INITIAL_EVENTS = [ 
    {
      id: createEventId(),
      title: &quot;All-day event&quot;,
      start: todayStr,
    },
    {
      id: createEventId(),
      title: &quot;Timed event&quot;,
      start: todayStr + &quot;T12:00:00&quot;,
    },
  ];
  
  export function createEventId() {
    return String(eventGuid++);
  }
  </code></pre>
  <p>`</p>