CODEWITHSUNDEEP
reactjsarraysfilternul
Zanatos
Zanatos

Reputation: 91

React Filter Ignore null Variables

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')

Upvotes: 0

Views: 168

Answers (1)

Jason Ming
Jason Ming

Reputation: 539

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( 
        ....
    )
}

Upvotes: 1

Related Questions