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