title: How to select different inputs for a date range selection in react
body: <p>I'm using a simple create-react-app and react-calendar-pane (<a href="https://github.com/brillout/awesome-react-components" rel="nofollow noreferrer">https://github.com/brillout/awesome-react-components</a>) to develop a simple date range selector for a calendar from scratch.</p>
  
  <p>The calendar is being called as a component using:</p>
  
  <pre><code>&lt;Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} /&gt;
  </code></pre>
  
  <p>I have two inputs above the calendar; a 'from' and 'to' date inputs:</p>
  
  <pre><code>&lt;label&gt; From &lt;input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /&gt; &lt;/label&gt;
  &lt;label&gt; To &lt;input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /&gt; &lt;/label&gt;
  </code></pre>
  
  <p>I'm using <code>onClickFromDate</code> and <code>onClickToDate</code> to invoke a state of activeness of the clicked input. And <code>onSelect</code> to display in the console that a selection from the calendar has been made.</p>
  
  <p>The issue I'm facing is that I can't figure out how to separate the two inputs so that when the 'from' input is clicked on, the user can select a date from the calendar and that date will appear in the 'from', with the same happening with the 'to' input.</p>
  
  <p>As my code is now, when a date is selected from the calendar, both input display the selected date from the calendar, with the clicking on the inputs not doing anything. I understand that is invoked using <code>onSelect={this.onSelect}</code> but I don't know how to differentiate between the two inputs to create a simple date range picker for this calendar.</p>
  
  <p>Full code (App.js):</p>
  
  <pre><code>class App extends React.Component {
    constructor(){
      super();
      this.state={ fromDate:moment(), toDate:moment() };
    }
  
    onSelect=(e)=&gt;{
      console.log('this is a date being selected');
    }
  
    onClickFromDate=(e)=&gt;{
      console.log('this is a from date');
    }
  
    onClickToDate=(e)=&gt;{
      console.log('this is a to date');
    }
  
    render() {
      return(
        &lt;div&gt;
          &lt;div className="App"&gt;
            &lt;header className="App-header"&gt;
              &lt;h1 className="App-title"&gt;Welcome to React&lt;/h1&gt;
            &lt;/header&gt;
            &lt;label&gt; From &lt;input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /&gt; &lt;/label&gt;
            &lt;label&gt; To &lt;input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /&gt; &lt;/label&gt;
            &lt;Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>