title: How to get start and end date value in React date range picker?
body: <p>In my code I've used one of the npm react components for date range picker (<a href="https://www.npmjs.com/package/react-date-range" rel="nofollow">https://www.npmjs.com/package/react-date-range</a>). In my screen I've an apply dates button. If i click that button i want to print date range value. How to get that range value onclick?</p>
  
  <pre><code>    var Calendarcomponent = React.createClass({
      getInitialState: function(){
          this.state = {
            'rangePicker' : {},
            'linked' : {},
            'datePicker' : null,
            'firstDayOfWeek' : null,
            'predefined' : {},
          }
      }
    handleSelect:function(range){
      console.log(range);
    },
    handleClick:function(range){
      console.log(range);
    },
    render:function(){
      var rangePicker = this.state;
      var format = 'dddd, D MMMM YYYY';
        return (
          &lt;div&gt;
              &lt;h4&gt;FILTER BY DATE&lt;/h4&gt;
              &lt;div className="date-range text-center"&gt;
                  &lt;div className="group"&gt;      
  &lt;label&gt;Date range&lt;/label&gt;
                      &lt;input className="inputMaterial" type="text" value={ rangePicker['endDate'] &amp;&amp; rangePicker['endDate'].format(format).toString() } required /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="set-borrow-dates"&gt;
                &lt;div id="select-date"&gt;Select Borrow date&lt;/div&gt;
                &lt;DateRange onInit={this.handleSelect} onclick={this.handleClick} /&gt;
                &lt;button id="apply-dates"&gt;&lt;i className="fa fa-check-circle"&gt;&lt;/i&gt; Apply Dates&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        )
    }
  });
  </code></pre>