Why a date object is shown as null when there is a value in it?

Question

I have an object named named cur_traveller which is inside TravellerModel object. When I am editing the record in the render method of passportdetails component I have logged whole cur_traveller object in the console and just in the next line I have logged cur_traveller.passport_expiry_date.

Here is the link of console

As you can see traveller object has the property named passport_expiry_date but when I am accessing it it gives me null in the console.

Here is the render method where I have logged these.

render() {
        let data = TravellerModel.cur_traveller
        console.log("Traveller Object", TravellerModel.cur_traveller)
        console.log("Passport Expiry date in Traveller Object", TravellerModel.cur_traveller.passport_expiry_date)
        let styles = Style.basic_details_styles
        return (
            <div style={styles.row}>
                <div style={styles.form_control}>
                    <div>
                        <TextField
                            inputProps={{
                                maxLength: 8
                            }}
                            disabled={TravellerModel.disabled('passport_number')}
                            label="Number"
                            value={data.passport_number ? data.passport_number : ""}
                            onChange={e => {
                                TravellerModel.handle_input("passport_number", e.target.value);
                                this.update()
                            }}
                        />
                        <div>
                        </div>
                        <Typography color="error" variant='caption'>
                            {TravellerModel.show_error('passport_number') ? PersonValidation.passport_number_errors(PersonValidation.passport_number().index) : null}
                        </Typography>
                    </div>
                </div>

                <div style={styles.form_control}>
                    <div>
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <DatePicker
                                disabled={TravellerModel.disabled('passport_issue_date')}
                                format="dd/MM/yyyy"
                                disableFuture
                                autoOk
                                onChange={date => {
                                    TravellerModel.handle_input("passport_issue_date", date);
                                    this.update()
                                }}
                                value={data.passport_issue_date}
                                label="Issue Date"
                                placeholder="Issue Date"
                            />
                        </MuiPickersUtilsProvider>
                    </div>
                    <div>
                        <Typography color="error" variant='caption'>
                            {TravellerModel.show_error('passport_issue_date') ? PersonValidation.passport_issue_date_errors(PersonValidation.passport_issue_date().index) : null}
                        </Typography>
                    </div>
                </div>
                <div style={styles.form_control}>
                    <div>
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <DatePicker
                                disabled={TravellerModel.disabled('passport_expiry_date')}
                                disablePast
                                format="dd/MM/yyyy"
                                autoOk
                                onChange={date => {
                                    TravellerModel.handle_input("passport_expiry_date", date);
                                    this.update()
                                }}
                                value={data.passport_expiry_date}
                                label="Expiry Date"
                                placeholder="Expiry Date"
                            />
                        </MuiPickersUtilsProvider>
                    </div>
                    <div>
                        <Typography color="error" variant='caption'>
                            {TravellerModel.show_error('passport_expiry_date') ? PersonValidation.passport_expiry_date_errors(PersonValidation.passport_expiry_date().index) : null}
                        </Typography>
                    </div>
                </div>
            </div>
        )
    }

Can someone explain me why I am getting null even if there is a value that we can see in the log?

Answer 1

new date(null) is initialized to 01 Jan 1970.So in your case it gives null because the date value is a default value of null.
Check this for more Why new Date(null) is returning this: Date 1970-01-01T00:00:00.000Z?