title: React-DatePicker updating state with previously selected date
body: <p>I would like to update the state of a component when a date is selected from the React-DatePicker.  I am getting some odd behavior below.</p>
  
  <p><strong>Example of Current Behavior:</strong></p>
  
  <ol>
  <li>Component loads with empty date field</li>
  <li><p>I select 3/28/2017 and get the following console log</p>
  
  <p>main.ffde8a1f.js:8 it changed dates</p>
  
  <p>main.ffde8a1f.js:8 date = 1490673600000</p>
  
  <p>main.ffde8a1f.js:8 dueDate value = </p></li>
  <li><p>Say then I select 3/22/2017 and get the following console log:</p>
  
  <p>main.ffde8a1f.js:8 it changed dates</p>
  
  <p>main.ffde8a1f.js:8 date = 1490155200000</p>
  
  <p>main.ffde8a1f.js:8 dueDate value = 1490673600000</p></li>
  </ol>
  
  <p><strong>The second and third logs should have the same value.  Can anyone explain to me why this weird behavior is occurring?</strong></p>
  
  <p>MY ATTEMPT</p>
  
  <p><strong>Imports</strong></p>
  
  <pre><code>import React from 'react';
  import DatePicker from 'react-datepicker';
  import moment from 'moment';
  import 'react-datepicker/dist/react-datepicker.css';
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <p>I set the state of <code>dueDate</code> to <code>''</code> to begin.</p>
  
  <pre><code>export default class Request extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        dueDate: '',
      }
  
      this.handleChangeDate = this.handleChangeDate.bind(this);
  
    }
  </code></pre>
  
  <p><strong>Handle Date Selection</strong></p>
  
  <p><strong>ISSUE</strong> 
  My <code>handleChangeDate</code> function will fire when a date is provided and the date in milliseconds will log to the console, but the dueDate is logged as being the previous value it should have been.</p>
  
  <pre><code> handleChangeDate(date) {
      console.log("it changed dates");
      console.log('date = ' + date);  //date in milliseconds logs properly
      this.setState({
        dueDate: date
      });
      console.log('dueDate value = ' + this.state.dueDate);  //date from state logs the previous value rather than its new value
    }
  </code></pre>
  
  <p><strong>Render</strong><br>
  I am keeping the date picker simple at the moment to minimize potential bugs.  Only the selected date is passed in from the state and the <code>handleChangeDate</code> method for a selected date.</p>
  
  <pre><code>  render() {
      return (
        &lt;div className="requestDetails"&gt;
          &lt;h2&gt;Due Date&lt;/h2&gt;
          &lt;DatePicker
             selected={this.state.dueDate}
             onChange={this.handleChangeDate}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>