title: How to refer 'this' keyword in React Stateless Component
body: <p>Am trying to create a React Stateless Components for input range day picker using library <a href="http://react-day-picker.js.org/examples/input-from-to" rel="nofollow noreferrer">day-picker</a>.</p>
  
  <p>If I try to convert the Stateful Component to Stateless, the <code>this</code> keyword is not accessible, since Stateless components doesn't have the scope for <code>this</code>.</p>
  
  <p>Am very new to React and Hooks and gave my best to resolve, but somehow failed to resolve the problem, this is what I was trying.</p>
  
  <p>Problem - Day picker range input is not working as expected. Always the calendar show start with current month. But somehow it is starting from last year.</p>
  
  <p><a href="http://react-day-picker.js.org/examples/input-from-to" rel="nofollow noreferrer">Actual Code</a></p>
  
  <pre><code>import React, { useState } from 'react';
  import DayPickerInput from 'react-day-picker/DayPickerInput';
  import moment from 'moment';
  import { formatDate, parseDate } from 'react-day-picker/moment';
  
  import 'react-day-picker/lib/style.css';
  
  const DayPickerRange = () =&gt; {
    const [days, setDays] = useState({
      from: new Date(),
      to: new Date(today.getTime() + 24 * 60 * 60 * 1000)
    });
  
    function showFromMonth() {
      const { from, to } = days;
      if (!from) {
        return;
      }
      if (moment(to).diff(moment(from), 'months') &lt; 2) {
        // this.to.getDayPicker().showMonth(from);
        to.getDayPicker().showMonth(from);
      }
    }
  
    const handleFromChange = from =&gt; {
      // Change the from date and focus the "to" input field
      setDays({ from, to }, showFromMonth);
    };
  
    const handleToChange = to =&gt; {
      setDays({ from, to });
    };
  
    const { from, to } = days;
  
    const modifiers = {
      start: from,
      end: to
    };
  
    return (
      &lt;div className="InputFromTo"&gt;
        &lt;DayPickerInput
          value={from}
          placeholder="From"
          format="LL"
          formatDate={formatDate}
          parseDate={parseDate}
          dayPickerProps={{
            utc: true,
            selectedDays: [from, { from, to }],
            disabledDays: [{ before: new Date() }],
            toMonth: to,
            month: to,
            modifiers,
            numberOfMonths: 12,
            onDayClick: () =&gt; to.getInput().focus()
          }}
          onDayChange={handleFromChange}
        /&gt;
        &lt;span className="InputFromTo-to"&gt;
          &lt;DayPickerInput
            ref={el =&gt; {
              days.to = el;
            }}
            value={to}
            placeholder="To"
            format="LL"
            formatDate={formatDate}
            parseDate={parseDate}
            dayPickerProps={{
              selectedDays: [from, { from, to }],
              disabledDays: [{ before: new Date() }],
              modifiers,
              month: from,
              fromMonth: from,
              numberOfMonths: 12,
              utc: true
            }}
            onDayChange={handleToChange}
          /&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    );
  };
  
  export default DayPickerRange;
  </code></pre>