Search code examples
reactjsreact-dates

airbnb/React-dates, what is the startDateId property?


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..


Solution

  • 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.