have an array of objects I'm showing in a table in react and adding a filter to the top of each table column. Most columns are NOT NULL but there are a few that can be null. These columns are failing when trying to filter them. Trying to find a way to bypass null variables. Showing what I have, first set works when no null values, second is the one I am attempting to fix.
{data
.filter((row) =>
!searchedValueQuote || row.QuoteNo
.toString()
.toLowerCase()
.includes(searchedValueQuote.toString().toLowerCase())
)
.filter((row) =>
!searchedValueStatus || row.dataValues.jobStatus || typeof row.dataValues.jobStatus !== null
.toString()
.toLowerCase()
.includes(searchedValueStatus.toString().toLowerCase())
)
.map(
....
)
}
The error is
TypeError: Cannot read properties of null (reading 'toString')
Please try this.
{data
.filter((row) => {
if (!searchedValueQuote) { return true; }
if (!row || !row.QuoteNo) { return false; }
return row.QuoteNo
.toString()
.toLowerCase()
.includes(searchedValueQuote.toString().toLowerCase())
})
.filter((row) => {
if (!searchedValueStatus) { return true; }
if (!row || !row.dataValues || !row.dataValues.jobStatus) { return false; }
return row.dataValues.jobStatus
.toString()
.toLowerCase()
.includes(searchedValueStatus.toString().toLowerCase())
})
.map(
....
)
}