title: FullCalendar with ReactJS: Passing data to Modal on eventClick getting "cannot read property of undefined" Advice appreciated
body: <p>I have a MERN stack application using the FullCalendar plugin (I know I'm asking for it mixing jQuery w React but alas, I am novice and far behind deadline).</p>
  
  <p>I want the user to click on an event on the calendar and see a modal with that specific events information.</p>
  
  <p>The issue is I can't access the specific events information from the FullCalendar plugins eventClick. The console informs me that it cannot read property of undefined.</p>
  
  <p>Is it possible to access this data in the Modal? I am not 100% clear on how the plugin parses the data it is passed through state, so maybe that is the issue? Or perhaps I am missing an opportunity to bind?</p>
  
  <p>If I set state to </p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  event: {title: '', start: new Date()}
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>and then (in FullCalendar) </p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  events={[{ title: "Event 1", date: "2020-01-01" }
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>I have no issue accessing the title of the event like so</p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  {this.state.event.title}
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>But when I set state to</p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  event: []
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>and use an axios.get request to set state to the db response like this</p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  axios.get('/events')
    .then(response =&gt; {
      this.setState({event: response.data})
  })
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>and set (in FullCalendar)</p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  events={this.state.event}
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>the Calendar renders properly, but when I attempt to access the title</p>
  
  <pre><code>- - - - - - - - - - - - - - - - - - - - -
  {this.state.event.title}
  - - - - - - - - - - - - - - - - - - - - -
  </code></pre>
  
  <p>it cannot read property of undefined.</p>
  
  <p>If I try {this.state.calendarEvents[0].title} it returns the title of only the first event object in the db. I think this is because calendarEvents is a js object containing all of the event objects in the db. Unfortunately I don't know how to remedy this issue.</p>
  
  <p>I tried using eventSource in FullCalendar to feed the calendar data, but realized the data I'm passing is a js object, not a json feed. I believe FullCalendar has a method for parsing this object into the proper data while rendering the calendar, but I'm not sure how that helps me.</p>
  
  <pre class="lang-js prettyprint-override"><code>
      import React from "react";
      import FullCalendar from "@fullcalendar/react";
      import dayGridPlugin from "@fullcalendar/daygrid";
      import timeGridPlugin from "@fullcalendar/timegrid";
      import interactionPlugin from "@fullcalendar/interaction";
      import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
      import axios from 'axios';
      import "../main.scss";
  
      import "@fullcalendar/core/main.css";
      import "@fullcalendar/daygrid/main.css";
      import "@fullcalendar/timegrid/main.css";
  
  
      export default class CalendarView extends React.Component {
        calendarComponentRef = React.createRef();
  
        state = {
          modal: false,
          calendarWeekends: true,
          event: []
        };
  
      componentDidMount() {
          axios.get('/events')
            .then(response =&gt; {
              this.setState({event: response.data})
              console.log({calendarEvents: response.data})
            })
            .catch(function (error) {
              console.log(error);
            })
        }
  
        toggle = () =&gt; {
          this.setState({ modal: !this.state.modal });
        };
  
        handleEventClick = ({ event, el }) =&gt; {
          this.toggle();
          this.setState({ event });
        };
  
        render() {
          return (
            &lt;div className="cal-container"&gt;
              &lt;div style={{marginTop: 30}}&gt;
                &lt;FullCalendar
                  defaultView="timeGridDay"
                  header={{
                    left: "prev,next today",
                    center: "title",
                    right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                  }}
                  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                  ref={this.calendarComponentRef}
                  weekends={this.state.calendarWeekends}
                  events={this.state.event}
                  eventClick={this.handleEventClick}
                  nowIndicator='true'
                  height='parent'
                /&gt;
                &lt;Modal
                isOpen={this.state.modal}
                toggle={this.toggle}
              &gt;
                &lt;ModalHeader toggle={this.toggle}&gt;
                  EVENT TITLE SHOULD GO HERE: {this.state.event.title}
                &lt;/ModalHeader&gt;
                &lt;ModalBody&gt;
                  &lt;div&gt;
                    EVENT INFO SHOULD GO HERE: {this.state.event.start}
                  &lt;/div&gt;
                &lt;/ModalBody&gt;
                &lt;ModalFooter&gt;
                  &lt;Button color="primary"&gt;Do Something&lt;/Button&gt;{" "}
                  &lt;Button color="secondary" onClick={this.toggle}&gt;
                    Cancel
                  &lt;/Button&gt;
                &lt;/ModalFooter&gt;
              &lt;/Modal&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      }
  
  </code></pre>
  
  <p>I expect the modal to show EVENT TITLE SHOULD GO HERE: Event 1 but instead it breaks and the console says "Cannot read property 'title' of undefined"</p>
  
  <p>Any advice, insight, guidance is greatly appreciated.</p>
  
  <p>If you read to the end, I'm already grateful for your time. Thanks!</p>