React this.setState not updating array state variable

Question

There are many postings about react state update involving array, but none of them seem to address my case.

I'm using the FullCalendar.io component which accepts an array of events as a prop from the parent component, and populates the calendar cells. I tried to setState 'cal_events_state' based on nextProps.cal_events, but for some reason cal_event_state is set to [] (apparently the initial state value is overwritten).

What am I missing?

import React from 'react';
import ReactDOM from 'react-dom';
var $ = require ('jquery')

var Calendar = React.createClass ({
  render: function() {
    return <div id="calendar"></div>;
  },

  getInitialState: function() {
      return {
        cal_events_state: [{"due": "201505", "title": "Production"}]
        , test_state: 11
      }
  },

componentDidMount: function() {
var self = this;
const var_cal_events = this.props.cal_events; //This prop is blank at this point because ajax hasn't returned an array yet.
$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: var_cal_events;
    })
  },
  componentWillReceiveProps: function(nextProps) {
    var self = this;
    var var_cal_events = nextProps.cal_events;  // after receiving the ajax fetch payload, this has some event tasks.

    this.setState({
      cal_events_state: var_cal_events, // This doesn't update state with the newly received payload
      test_state: 22            // This updates state
})
$('#calendar').fullCalendar({
  events: var_cal_events

})

$('#calendar').fullCalendar('refetchEvents');

},


});

why are you creating the calendar twice? and why are you using es5 and es6 intermingled? And on top of that, you should probably not use jquery here. there are other ways to have a calendar and that way you dont have a ton of dom manipulation outside of react (which is the preferred practice) — John Ruddell
– John Ruddell, Commented May 30, 2016 at 21:14
I mean just do a simple google search.. found results like this. Link1.... Link2.... Bunch of different examples... — John Ruddell
– John Ruddell, Commented May 31, 2016 at 0:19
You're welcome.. remember Google is your friend. If you want a react calendar just search for "react calendar" and been you have it :) when you are stuck just try googling the exact issue and you should be able to find the answer — John Ruddell
– John Ruddell, Commented May 31, 2016 at 6:30

Jason O. · Accepted Answer · 2016-05-31 06:16:13Z

13

It turned out that 'setState' does update the state variable, but I didn't realize it doesn't do so until the execution of the function is completed (ie. until your code exit the function block. I was checking the this.state.variable right after the setState statement, which made it look like the variable is not updated.

answered May 31, 2016 at 6:16

Jason O.

3,3709 gold badges38 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

leaksterrr Over a year ago

this was stressing me out so much so thanks for this!

raza9798 Over a year ago

Thank you for you answer. my array didn't update at one click when i used setState. whereas when i push to a const MyArray = [] it updated quickly. :)

atlantis Over a year ago

I spent more than 2 hours trying to debug what looked like a statue update issue :| And then came across your answer. This is a lifesaver, thank you!

Collectives™ on Stack Overflow

React this.setState not updating array state variable

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related