2

I have implemented successfully the Reac-dates range as it is explained here, my concern is

What are these props startDateId and endDateId useful for???

<DateRangePicker
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
  focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
  onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
/>

I know it might be a simple answer but I haven't found an explanation, all it says is that it must be a unique string, I have put it the same string on both properties and it is still working..

Renzo Calla
  • 7,486
  • 2
  • 22
  • 37

1 Answers1

3

It's for accessibility, the input field should be wrapped in a <label> tag that is also linked to with id of the input. Each id is supposed to be unique on the page so it can't reliably be generated within the component, hence it is passed as a prop.

Dan Nagle
  • 4,384
  • 1
  • 16
  • 28
  • Cool, do you have a reference of this explanation?? – Renzo Calla Mar 28 '18 at 00:47
  • A long time ago (a year or so) I read it on the Github issues list for the react-dates project. Here's a link to the comment from the project owner. https://github.com/airbnb/react-dates/issues/326 – Dan Nagle Mar 28 '18 at 01:05