I have a list of documents that can return null value from the db. Namely documentAuthor and featureId.

The user can filter the list by clicking on the heading section of each column. Namely documentAuthor or featureID etc.

If the properties are null I want them to still be visible within the UI. The filtering I've done below is preventing that from happening for some reason - if I comment out filtering logic for documentAuthor and featureId the correct amount of records show.

How can I resolve this filtering issue? The "?" on documentAuthor and featureId is to check it's either going to be populated or null.

My filtering:

const [filters, setFilters] = React.useState({
    documentAuthor: '',
    documentName: '',
    documentSource: '',
    documentType: 'All',
    documentUploadDateFrom: '',
    documentUploadDateTo: new Date().toISOString(),
    featureId: '',
    fileFormat: '',
  });





 useEffect(() => {
    setDocuments(claimsStore.getIncomingDocuments());

    const filteredDocuments = documents.filter(
      (document) =>
        document.documentAuthor?.toLowerCase().includes(filters.documentAuthor.toLowerCase()) &&
        document.documentName?.toLowerCase().includes(filters.documentName.toLowerCase()) &&
        document.documentSource?.toLowerCase().includes(filters.documentSource.toLowerCase()) &&
        document.documentType.includes(filters.documentType === 'All' ? '' : filters.documentType) &&
        document.featureId?.includes(filters.featureId) &&
        document.mimeType.toLowerCase().includes(filters.fileFormat.toLowerCase()) &&
        document.uploadDateTime > filters.documentUploadDateFrom &&
        document.uploadDateTime < filters.documentUploadDateTo,
    );
    
    setRows(
      filteredDocuments.map((document) =>
        createData(
          document.documentAuthor ?? '',
          document.documentMetadataId.toLocaleString(),
          document.documentMetadataId.toLocaleString(),
          document.documentName ?? '',
          document.documentSource ?? '',
          document.documentType,
          document.featureId ?? '',
          document.mimeType,
          document.uploadDateTime,
        ),
      ),
    );
  }, [claimsStore, documents, filters]);

CodePudding user response：

When using optional chaining, with a nullish object, subsequent property accesses are not evaluated, cf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#short-circuiting.

When documentAuthor or featureId properties are null, the whole expression returns undefined, which is falsy, and so the document is filtered out of the collection. You need to allow null values explicitly like this:

const filteredDocuments = documents.filter(
      (document) =>
          // !document.documentAuthor is a shortcut to document.documentAuthor == null
          (!document.documentAuthor || document.documentAuthor.toLowerCase().includes(filters.documentAuthor.toLowerCase())) &&
          document.documentName?.toLowerCase().includes(filters.documentName.toLowerCase()) &&
          document.documentSource?.toLowerCase().includes(filters.documentSource.toLowerCase()) &&
          document.documentType.includes(filters.documentType === 'All' ? '' : filters.documentType) &&
          (!document.featureId || document.featureId.includes(filters.featureId) &&
          document.mimeType.toLowerCase().includes(filters.fileFormat.toLowerCase()) &&
          document.uploadDateTime > filters.documentUploadDateFrom &&
          document.uploadDateTime < filters.documentUploadDateTo,
    );
    
setRows(
    filteredDocuments.map((document) =>
        createData(
            document.documentAuthor ?? '',
            document.documentMetadataId.toLocaleString(),
            document.documentMetadataId.toLocaleString(),
            document.documentName ?? '',
            document.documentSource ?? '',
            document.documentType,
            document.featureId ?? '',
            document.mimeType,
            document.uploadDateTime,
        ),
    ),
);