TechQA.

Warning: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePicker`, expected `boolean`

244 views Asked by At

I'm using react 16.13.1 and react-dates 21.8.0. I'm facing a problem with DateRangePicker component(SingleDatePicker works just fine)

i use it as follow :

<DateRangePicker
    // startDate={this.props.filters.startDate}
    endDate={this.props.filters.endDate}
    onDatesChange={this.onDatesChange}
    focusedInput={this.state.focused}
    endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
    startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
    onFocusChange={this.onFocusChange}
    showClearDates={true}
    numberOfMonths={1}
    isOutsideRange={() => false}
    regular = {()=> true}
    reopenPickerOnClearDates= {()=>true}
/>

and the complete component :

Filter.js

class ExpenseListFilters extends React.Component{
    state = {
        focused:null
    }

    onDatesChange = ({ startDate, endDate }) => {
        this.props.dispatch(setStartDate(startDate));
        this.props.dispatch(setEndDate(endDate));
    };
    onFocusChange = (focused) => {
        console.log('focused')
        this.setState(() => ({ focused }));
    }
    render(){
        return (
            <form className={'form-inline'}>
            <input name='filter' type="text" className={'expense-filter'} value={this.props.filters.text}
            onChange={(e) => {
                this.props.dispatch(setTextFilter(e.target.value));
            }}/>
            <div className="form-group">
            <select value={this.props.filters.sortBy} className="custom-select"
                onChange={(e) => {
                    if (e.target.value === 'date') {
                        this.props.dispatch(sortByDate());
                    } else if (e.target.value === 'amount') {
                        this.props.dispatch(sortByAmount());
                    }
                }}>
                <option value="date">Date</option>
                <option value="amount">Amount</option>
            </select>
                <DateRangePicker
                    // startDate={this.props.filters.startDate}
                    endDate={this.props.filters.endDate}
                    onDatesChange={this.onDatesChange}
                    focusedInput={this.state.focused}
                    endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
                    startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
                    onFocusChange={this.onFocusChange}
                    showClearDates={true}
                    numberOfMonths={1}
                    isOutsideRange={() => false}
                    regular = {()=> true}
                    reopenPickerOnClearDates= {()=>true}
                />
            </div>
            </form>

        )
    }
}


const mapStateToProps = (state) => {
    return {
        filters: state.filters
    };
};
export default connect(mapStateToProps)(ExpenseListFilters)

And i got some warning on the console :

index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePicker`, expected `boolean`.

Here is the full warning messgae :

index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePicker`, expected `boolean`.
    in DateRangePicker (at ExpenseListFilters.js:42)
    in ExpenseListFilters (created by ConnectFunction)
    in ConnectFunction (at ExpenseDashboard.js:8)
    in div (at ExpenseDashboard.js:7)
    in ExpenseDashboard (created by Context.Consumer)
    in Route (at AppRouter.js:44)
    in Switch (at AppRouter.js:43)
    in div (at AppRouter.js:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at AppRouter.js:10)
    in AppRouter (at App.js:13)
    in Provider (at App.js:12)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:15)
console.<computed>  @   index.js:1
printWarning    @   checkPropTypes.js:20
checkPropTypes  @   checkPropTypes.js:82
validatePropTypes   @   react.development.js:1714
createElementWithValidation @   react.development.js:1813
render  @   ExpenseListFilters.js:40
finishClassComponent    @   react-dom.development.js:17160
updateClassComponent    @   react-dom.development.js:17110
beginWork   @   react-dom.development.js:18620
beginWork$1 @   react-dom.development.js:23179
performUnitOfWork   @   react-dom.development.js:22154
workLoopSync    @   react-dom.development.js:22130
performSyncWorkOnRoot   @   react-dom.development.js:21756
scheduleUpdateOnFiber   @   react-dom.development.js:21188
updateContainer @   react-dom.development.js:24373
(anonymous) @   react-dom.development.js:24758
unbatchedUpdates    @   react-dom.development.js:21903
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24757
render  @   react-dom.development.js:24840
./src/index.js  @   index.js:14
__webpack_require__ @   bootstrap:784
fn  @   bootstrap:150
1   @   configureStore.js:17
__webpack_require__ @   bootstrap:784
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1
index.js:1 Warning: Failed prop type: DateRangePicker: unknown props found: regular
    in DateRangePicker (at ExpenseListFilters.js:42)
    in ExpenseListFilters (created by ConnectFunction)
    in ConnectFunction (at ExpenseDashboard.js:8)
    in div (at ExpenseDashboard.js:7)
    in ExpenseDashboard (created by Context.Consumer)
    in Route (at AppRouter.js:44)
    in Switch (at AppRouter.js:43)
    in div (at AppRouter.js:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at AppRouter.js:10)
    in AppRouter (at App.js:13)
    in Provider (at App.js:12)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:15)
console.<computed>  @   index.js:1
printWarning    @   checkPropTypes.js:20
checkPropTypes  @   checkPropTypes.js:82
validatePropTypes   @   react.development.js:1714
createElementWithValidation @   react.development.js:1813
render  @   ExpenseListFilters.js:40
finishClassComponent    @   react-dom.development.js:17160
updateClassComponent    @   react-dom.development.js:17110
beginWork   @   react-dom.development.js:18620
beginWork$1 @   react-dom.development.js:23179
performUnitOfWork   @   react-dom.development.js:22154
workLoopSync    @   react-dom.development.js:22130
performSyncWorkOnRoot   @   react-dom.development.js:21756
scheduleUpdateOnFiber   @   react-dom.development.js:21188
updateContainer @   react-dom.development.js:24373
(anonymous) @   react-dom.development.js:24758
unbatchedUpdates    @   react-dom.development.js:21903
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24757
render  @   react-dom.development.js:24840
./src/index.js  @   index.js:14
__webpack_require__ @   bootstrap:784
fn  @   bootstrap:150
1   @   configureStore.js:17
__webpack_require__ @   bootstrap:784
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1
index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePickerInputController`, expected `boolean`.
    in DateRangePickerInputController (created by DateRangePicker)
    in DateRangePicker (at ExpenseListFilters.js:42)
    in div (at ExpenseListFilters.js:30)
    in form (at ExpenseListFilters.js:25)
    in ExpenseListFilters (created by ConnectFunction)
    in ConnectFunction (at ExpenseDashboard.js:8)
    in div (at ExpenseDashboard.js:7)
    in ExpenseDashboard (created by Context.Consumer)
    in Route (at AppRouter.js:44)
    in Switch (at AppRouter.js:43)
    in div (at AppRouter.js:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at AppRouter.js:10)
    in AppRouter (at App.js:13)
    in Provider (at App.js:12)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:15)
console.<computed>  @   index.js:1
printWarning    @   checkPropTypes.js:20
checkPropTypes  @   checkPropTypes.js:82
validatePropTypes   @   react.development.js:1714
createElementWithValidation @   react.development.js:1813
render  @   DateRangePicker.js:884
finishClassComponent    @   react-dom.development.js:17160
updateClassComponent    @   react-dom.development.js:17110
beginWork   @   react-dom.development.js:18620
beginWork$1 @   react-dom.development.js:23179
performUnitOfWork   @   react-dom.development.js:22154
workLoopSync    @   react-dom.development.js:22130
performSyncWorkOnRoot   @   react-dom.development.js:21756
scheduleUpdateOnFiber   @   react-dom.development.js:21188
updateContainer @   react-dom.development.js:24373
(anonymous) @   react-dom.development.js:24758
unbatchedUpdates    @   react-dom.development.js:21903
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24757
render  @   react-dom.development.js:24840
./src/index.js  @   index.js:14
__webpack_require__ @   bootstrap:784
fn  @   bootstrap:150
1   @   configureStore.js:17
__webpack_require__ @   bootstrap:784
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1

Any help or suggestion will be appreciated ! THANK YOU

reactjs react-dates
Original Q&A
1

There are 1 answers

0
YoramZ On

I had the same issue but following the wrapper example from the authors solved it for me. It happens when trying to add undefined props that you need to define first. https://github.com/airbnb/react-dates/blob/master/examples/DateRangePickerWrapper.jsx

Related Questions in REACTJS

Related Questions in REACT-DATES

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions