title: how to open airbnb SingleDatePicker calendar on focus
body: <p>Am trying to include a airbnb SingleDatePicker in my component as shown below</p>
  
  <pre><code>import "react-dates/initialize";
  import "react-dates/lib/css/_datepicker.css";
  import { SingleDatePicker } from "react-dates";
  
  export default class ExpenseForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        createdAt: moment(),
        calendarFocused: false
      };
  
      this.onDateChange = this.onDateChange.bind(this);
      this.onFocusChange = this.onFocusChange.bind(this);
    }
  
    onDateChange(createdAt) {
      this.setState(() =&gt; ({ createdAt }));
    }
  
    onFocusChange({ focused }) {
      this.setState(() =&gt; ({
        focused
      }));
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;SingleDatePicker
              date={this.state.createdAt}
              startDateId="MyDatePicker"
              onDateChange={this.onDateChange}
              focused={this.state.calendarFocused}
              onFocusChange={this.onFocusChange}
              id="SDP"
            /&gt;
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>It shows the current date inside the inside the input box as shown below but when i click on the field nothing happens(Calendar widget not opening).</p>
  
  <p><a href="https://i.stack.imgur.com/4oMko.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4oMko.png" alt="enter image description here"></a></p>
  
  <p>Am not getting any errors in the console to figure out what is the issue. Could anyone please help me on fixing this issue?</p>