Search code examples
reactjsreact-datepicker

Problem while changing date in React date picker

In my form I have 2 datepickers,

<DatePicker
onChange={this.onExpiryDateChanged}
clearIcon={null}
calendarIcon={null}
locale={'en-GB'}
value={this.state.expiry_date == null ? new Date() : this.state.expiry_date}/>

and

<DatePicker
onChange={this.onDateChangeDueBy}
clearIcon={null}
calendarIcon={null}
locale={'en-GB'}
value={this.state.review_date == null ? new Date() : this.state.review_date}/>

these are the onChange handler

onDateChangeDueBy = (date) => {
        debugger;
        let curmonth = parseInt(date.getMonth());
        let currmonth = curmonth + 1;
        var dateStr =
            currmonth >= 10
                ? date.getFullYear() + '/' + currmonth + '/' + date.getDate()
                : date.getFullYear() + '/0' + currmonth + '/' + date.getDate();
        this.setState({due_by: dateStr, review_date: date});
    };

and

onExpiryDateChanged = (date) => {
        debugger;
        let curmonth = parseInt(date.getMonth());
        let currmonth = curmonth + 1;
        var dateStr2 =
            currmonth >= 10
                ? date.getFullYear() + '/' + currmonth + '/' + date.getDate()
                : date.getFullYear() + '/0' + currmonth + '/' + date.getDate();
        this.setState({expiry_due_by: dateStr2, expiry_date: date});
    }

Now for both case expiry_date and review_date 's state are set to null by default and due_by and expiry_due_by are set to '1970-01-01'

Now When changing date from the second datepicker it is not throwing any error and date gets selected as expected but for the first one , it is throwing error,

Uncaught Error: Objects are not valid as a React child (found: Fri Aug 27 2021 00:00:00 GMT+0530 (India Standard Time)). If you meant to render a collection of children, use an array instead

Here is the demo

enter image description here

Edit : The date picker which causing the issue

{(role === 'fprm' || role === 'admin_manager') &&
                    <React.Fragment>
                        <GeneralLabel>Expiry Date</GeneralLabel>
                        <CSLDateCover>
                            <DatePicker
                                onChange={this.onExpiryDateChanged}
                                clearIcon={null}
                                calendarIcon={null}
                                locale={'en-GB'}
                                id="date"
                                name="date"
                                value={this.state.expiry_date === null ? new Date() : this.state.expiry_date}/>
                        </CSLDateCover>
                    </React.Fragment>
                    }
Solution

  • I think the problem is on conditional rendering of DatePicker. I wuold suggest you to modify your code in this way:

    return (
{(role === 'fprm' || role === 'admin_manager') && (this.state.curlane === 'COMP_FINPROMO_CONFIRMED' || this.state.curlane === 'COMP_FINPROMO_REVIEW_REQUIRED') && this.state.isEnabledExpiryDate && 
   <React.Fragment>
      <GeneralLabel>Expiry Date</GeneralLabel>
         <CSLDateCover>
            <DatePicker
               onChange={this.onExpiryDateChanged}
               clearIcon={null}
               calendarIcon={null}
               locale={'en-GB'}
               id="date"
               name="date"
               value={this.state.expiry_date === null ? new Date() : this.state.expiry_date} />
         </CSLDateCover>
   </React.Fragment>     
 }
);