Problem while changing date in React date picker

Question

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

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

I think that the problem is on HTML and not on logic. Could you post the return of this component? — Giovanni Esposito, Aug 05 '21 at 13:55
Can you provide a snippets of this please ? Or at least the render of your component — Nicolas Menettrier, Aug 05 '21 at 13:55
Hi @GiovanniEsposito thanks for Your feedback , the render method is consists of 300+ line , So I can't post it here. Sorry :( — Jerome Taylor, Aug 05 '21 at 14:10
Hi @NicolasMenettrier thanks for Your feedback , the render method is consists of 300+ line , So I can't post it here. Sorry :( — Jerome Taylor, Aug 05 '21 at 14:11
@JeromeTaylor ok so show me just the part in which you render dates — Giovanni Esposito, Aug 05 '21 at 14:12
@GiovanniEsposito while changing the date, I am facing this error inside react date picker, expect that datepicker, I am not rendering anywhere.. — Jerome Taylor, Aug 05 '21 at 14:16
@JeromeTaylor Is more complicated then I thought. Let's do this test: on arrow function put an else condition and return just an empty `div`. Error is still there? — Giovanni Esposito, Aug 05 '21 at 14:20
@GiovanniEsposito sorry for the mistake, but Yes it is still giving the same error — Jerome Taylor, Aug 05 '21 at 14:27
@JeromeTaylor I try to write an answer. If it doesn't work add a comment and I will remove the answer. — Giovanni Esposito, Aug 05 '21 at 14:31
@GiovanniEsposito hi sir, If I use your answer and modify the code i.e simplify conditional statement then it is rendering, let me post what I have done. Please review one more time and plz say what it need to be done in order to make the conditional rendering satisfy all && and || — Jerome Taylor, Aug 05 '21 at 14:59
@JeromeTaylor in your condition please check that every equality are expressed with `===`. I don't have any other suggestions. If condition doesn't return what do you want, debug it by creating a function that is connected to a button and check the result (put some console.log) — Giovanni Esposito, Aug 05 '21 at 15:09
Thanks @GiovanniEsposito sir for Your time and efforts , really helpful! — Jerome Taylor, Aug 05 '21 at 15:19

score 2 · Accepted Answer · answered Aug 05 '21 at 14:35

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>     
 }
);

Problem while changing date in React date picker

1 Answers1