Format date object in multiple documents - RangeError for null / empty object

[gyinshen]

Hi community, thanks for your great contribution. I'm using date-fns to convert ISO dates from my mongoDB database. The problem is that not every document have the date object which causes RangeError: Invalid time value error on my react app.

I'm displaying the documents using react table and tried to exclude documents which do not have a date object.

const columns = useMemo( () => [ { Header: "All companies", columns: [ { Header: "Founding Date", accessor: "companyFoundationDate", Cell: ({ value }) => { if(!isValid(value) && value !== 'NaN') { return format(new Date(value), 'MM/yyyy') } } }, ] }, ], [] );

However, this does not work and continues to throw the same error without the if statement. I'm thinking that it's because the if statement doesn't work here. Do you think you can help me improve this?

Thanks!

[maximtop]

Shouldn't condition be without negation before isValid, like (isValid(value) && value !== 'NaN')?

[maximtop]

seems like on screenshot the error is caused by another part of your code, and there is no check for isValid

[gyinshen]

Sorry that I was not organized. The screenshot is wrong because I was experimenting with isDate too.

With the if statement, it will show Error: Cell(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

const columns = useMemo( () => [ { Header: "All royalties", columns: [ { Header: "Start Date", accessor: "royaltyStartDate", Cell: ({ value }) => { if(isValid(value) && value !== 'NaN') { return format(new Date(value), 'MM/yyyy') } } }, ] }, ], [] );

Without the if statement, it will show RangeError: Invalid time value error

const columns = useMemo( () => [ { Header: "All royalties", columns: [ { Header: "Start Date", accessor: "royaltyStartDate", Cell: ({ value }) => { return format(new Date(value), 'MM/yyyy') } }, ] }, ], [] );

I have another set of documents with similar structure and it's working perfectly with the code above (the 2nd one without if statement). The difference is that this set of documents all have date objects.

[maximtop]

The error states, that you should return null

have you tried to return null in the else branch?

const columns = useMemo(() => [{
    Header: "All royalties",
    columns: [{
        Header: "Start Date",
        accessor: "royaltyStartDate",
        Cell: ({
            value
        }) => {
            if (isValid(value) && value !== 'NaN') {
                return format(new Date(value), 'MM/yyyy')
            } else {
                return null
            }
        }
    }, ]
}, ], []);

[gyinshen]

Thanks buddy. I tried return null. The error went away but react shows a blank column.

[maximtop]

isValid checks if date is valid, and not a string
I think that you should parse your string before checking its validity