React - State not updated

Question

Here I try to set state.autocomplete to 'hello' and then print it, but state seems to be null. How can that be when I just updated the state using setState? data is set as a global variable.

  var data = {     populate_at: ['web_start', 'web_end'],     autocomplete_from: ['customer_name', 'customer_address']   };     var AutocompleteFromCheckboxes = React.createClass({     handleChange: function(e) {       this.setState( { autocomplete_from: 'event.target.value' } );       console.log('autocompleteFrom state: ', this.state.autocomplete_from);       // ^  => Uncaught TypeError: Cannot read property 'autocomplete_from' of null       return 1;     },     render: function() {       var autocompleteFrom = this.props.autocomplete_from.map(function(value) {         return (           <label for={value}>             <input type="checkbox" name={value} value="{value}"               onChange={this.handleChange.bind(this)}               ref="autocomplete-from"/>             {value}           </label>         );       }, this);       return (         <div className="autocomplete-from">           {autocompleteFrom}         </div>       );     }   });    var DynamicForm = React.createClass({     getInitialState: function() {       return {         name              : null,         populate_at       : null,         same_as           : null,         autocomplete_from : "not set",         title             : null       };     },     saveAndContinue: function(e) {       e.preventDefault();       var data = {         name     : this.refs.name.getDOMNode().value,       };       console.log('data: ' + data.name);     },      render: function() {       return (           <AutocompleteFromCheckboxes             autocomplete_from={this.props.data.autocomplete_from} />       );     }   });     var mountpoint = document.getElementById('dynamic-form');   if ( mountpoint ) {     React.render(<DynamicForm data={data} />, mountpoint);   }  }); 

Answer 1

From the reactjs docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

https://facebook.github.io/react/docs/component-api.html

What you can do is pass a callback function to setState which is triggered once the state has been updated:

this.setState(     {autocomplete_from: ...},      function () {         ... at this point the state of the component is set ...     } )