Custom Filter Issue: Uncaught TypeError: Cannot read properties of undefined (reading 'afterFilter')

[jaridgeway]

Question
I am getting an error when trying to use a custom data filter. The filter looks like it is working based on the console.logs, but the table is not actually filtering anything.

Error:
context.js:140 Uncaught TypeError: Cannot read properties of undefined (reading 'afterFilter')
at FilterProvider.doFilter (context.js:140)
at context.js:103
at Object.onFilter (context.js:112)
at DateFilter.filter (Filter.js:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)

Screenshots
If applicable, add screenshots to help explain your problem.
Filtered Data

Original data:

Code:

import React, { useState, useEffect } from "react";
import { LinkContainer } from "react-router-bootstrap";
import { Button } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import Loader from "../components/Loader";
import Message from "../components/Message";
import DateFilter from "../components/Filter";
import { listOrders, deliverOrder } from "../actions/orderActions";
import { ORDER_DELIVER_RESET } from "../constants/orderConstants";
import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { customFilter } from 'react-bootstrap-table2-filter';

function OrderListScreennew({ history }) {
const dispatch = useDispatch();

const orderList = useSelector((state) => state.orderList);
const { loading, error, orders } = orderList;

const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;

const orderDeliver = useSelector((state) => state.orderDeliver);
const { loading: loadingDeliver, success: successDeliver } = orderDeliver;

const filterDate = (filterVals, data) => {
console.log(filterVals);
console.log(data);
let min= new Date(parseInt(filterVals.min.substring(0,4),10),parseInt(filterVals.min.substring(5,7),10)-1,parseInt(filterVals.min.substring(8,10),10))
let max= new Date(parseInt(filterVals.max.substring(0,4),10),parseInt(filterVals.max.substring(5,7),10)-1,parseInt(filterVals.max.substring(8,10),10))

const filteredData = data.filter(
  // here this is not books but this is undefined here
  row => {
     let datejs= new Date(parseInt(row.date.substring(0,4)),parseInt(row.date.substring(5,7))-1,parseInt(row.date.substring(8,10)))
     console.log(datejs)
     console.log(min)
     console.log((((min && datejs >= min) || !filterVals.min) && ((max && datejs <= max) || !filterVals.max)))

    return (((min && datejs >= min) || !filterVals.min) && ((max && datejs <= max) || !filterVals.max))}
);
console.log(filteredData);
return filteredData;

};

const instructionsFormatter = (cell, row) => {
return row.orderItems.map((item, index) => {
return

{item.instructions}

;
});
};
const orderFormatter = (cell, row) => {
return row.orderItems.map((item, index) => {
return

{item.name}

;
});
};
const ratingFormatter = (cell, row) => {
return row.orderItems.map((item, index) => {
return

{item.rating}

;
});
};
// const dateFormatter = (cell, row) => {
// return

{cell.substring(0, 10)}

;

// };

const timeFormatter = (cell, row) => {
return cell ? (

{cell.substring(11, 16)}

) : (
<Button
type="button"
className="btn btn-block"
onClick={() => deliverHandler(row)}
>
Mark as Delivered

);
};

const columns = [
{
dataField: "_id",
text: "ID",
sort:true
},
{
dataField: "user.name",
text: "Name",
},
{
dataField: "date",
text: "Date",
//formatter: (cell, row) => dateFormatter(cell, row),
filter: customFilter({
onFilter: filterDate
}),
filterRenderer: (onFilter, column) => (

)
},
{
dataField: "totalPrice",
text: "Total Price",
},
{
dataField: "tip",
text: "Tip",
},
{
dataField: "isPaid",
text: "Paid",
sort:true,
},
{
dataField: "table",
text: "Table",
sort:true,
},
{
dataField: "orderItems.name",
text: "Order",
formatter: (cell, row) => orderFormatter(cell, row),

},
{
  dataField: "orderItems.instructions",
  text: "Instructions",
  formatter: (cell, row) => instructionsFormatter(cell, row),
},
{
  dataField: "orderItems.rating",
  text: "Spice",
  formatter: (cell, row) => ratingFormatter(cell, row),
},
{
  dataField: "deliveredAt",
  text: "Finished",
  formatter: (cell, row) => timeFormatter(cell, row),
},

];

useEffect(() => {
if (userInfo && userInfo.isAdmin) {
dispatch(listOrders());
} else {
history.push("/login");
}
if (successDeliver) {
dispatch({ type: ORDER_DELIVER_RESET });
}
}, [dispatch, history, userInfo, successDeliver]);

const deliverHandler = (order) => {
dispatch(deliverOrder(order));
};

return (

Orders

{loading ? (

) : error ? (
{error}
) : (
<BootstrapTable
striped
hover
keyField="_id"
data={orders}
columns={columns}
condensed
filter={ filterFactory() }
/>
)}

);
}

export default OrderListScreennew;

Data:
I am using data that is in JSON. It is an array of objects. I pasted one of the objects below.

[{"_id":1,"orderItems":[{"_id":1,"name":"Latte","qty":1,"rating":0,"instructions":null,"price":"3.00","image":"/images/placeholder.png","product":1,"order":1}],"shippingAddress":{"_id":1,"address":"1781 S Fish Hatchery Rd","city":"Fitchburg","postalCode":"53575","country":"US","shippingPrice":null,"order":1},"user":{"id":1,"_id":1,"username":"jamesaridgeway@gmail.com","email":"jamesaridgeway@gmail.com","name":"James","isAdmin":true},"date":"2021-12-24","paymentMethod":"PayPal","taxPrice":"0.25","tip":"0.45","totalPrice":"3.70","table":1,"isPaid":false,"paidAt":null,"isDelivered":true,"deliveredAt":"2022-01-04T11:43:24.448221Z","createdAt":"2021-12-24T21:30:42.081771Z"}, ...]

codesandbox

I have this codesandbox that is working. There are only a couple of differences between this one and mine.

1. My data is a bit more complicated.
2. I am creating this inside of a function that I am using to route my screens
3. I am importing the class used for rendering.

The only thing I can think of is that my data must be different somehow.

(https://codesandbox.io/s/date-filter-h60ye?file=/src/App.js)

[jaridgeway]

I swapped out the data that I am using in my actual code for the same data in the codesandbox. I ended up with the same error, so something else must be going wrong