Events getting doubled on fullcalendar.io

Question

I am using rails and react.js for my project. Lets say I create event A but I then change my mind and cancel it (through a bootstrap modal) then I start another event B and I confirm it, event A is still created. Am I missing something?

componentDidMount: function(){
    var self = this;
    var events = [];
    $('#calendar').fullCalendar({
      googleCalendarApiKey: self.props.publicApi,
      defaultView: 'agendaWeek',
      minTime: '08:00:00',
      maxTime: '18:00:00',
      height: 'auto',
      timezone: 'local',
      firstDay: moment().day(),
      allDaySlot: false,
      selectable: true,
      select: function(start, end){
        $('#myModal').modal('show')
        $('#proceed-to-payment').on('click', function(){
          var durationString = $('#time-select').find(':selected').text()
          var duration = parseFloat(durationString)
          var eventData;

          end.set('hour', start.hour() + duration  )
          end.set('minutes', start.minutes())
          eventData = {
            title: "New Event",
            start: start.format(),
            end: end.format()
          };
          $('.fc-event').remove();
          $('#calendar').fullCalendar('renderEvent', eventData);

          var url = '/appointment/' + self.state.sportCenter.id + '/appointments'
          $.post(url, {
            start: start.format(),
            duration: duration,
            title: "Appointment set by " + self.state.user.first_name + " " + self.state.user.last_name,
            user_id: self.state.user.id,
            appointment_id: self.state.appointment.id
          })

        })

        $('#calendar').fullCalendar('unselect');
      },
      eventSources: [{
              googleCalendarId: self.state.email_address
            }]
    });

this.state.appointments.forEach(function(appointment){
  events.push( self.initalizeOldEvents(appointment) )
});

$('#calendar').fullCalendar('addEventSource', events );
},

Answer 1

If you're using Flux with React, you'll find that you'll take the state out of the component and put it into stores. This will greatly simplify your components, as they'll always just ask the store for their state and use that to render.