TypeError: undefined is not an object (evaluating 'expensesCtx.expenses.filter')

I am creating an expense tracker app while using the filter method it can't receive the array properly can someone help me to figure out where i am doing wrong Error:TypeError: undefined is not an object (evaluating 'expensesCtx.expenses.filter') The above specified error is present in the RecentExpenses.js file

expenses-context.js

import { createContext, useReducer } from "react";

const DUMMY_EXPENSES = [
  {
    id: "e1",
    description: "A pair of shoes",
    amount: 59.99,
    date: new Date("2021-12-19"),
  },
  {
    id: "e2",
    description: "A pair of trousers",
    amount: 89.29,
    date: new Date("2022-01-05"),
  },
  {
    id: "e3",
    description: "A pair of shoes",
    amount: 5.99,
    date: new Date("2021-12-01"),
  },
  {
    id: "e4",
    description: "A book",
    amount: 14.99,
    date: new Date("2022-02-19"),
  },
  {
    id: "e5",
    description: "Another book",
    amount: 18.59,
    date: new Date("2022-02-18"),
  },
  {
    id: "e6",
    description: "A pair of shoes",
    amount: 59.99,
    date: new Date("2021-12-19"),
  },
  {
    id: "e7",
    description: "A pair of trousers",
    amount: 89.29,
    date: new Date("2022-01-05"),
  },
  {
    id: "e8",
    description: "A pair of shoes",
    amount: 5.99,
    date: new Date("2021-12-01"),
  },
  {
    id: "e9",
    description: "A book",
    amount: 14.99,
    date: new Date("2022-02-19"),
  },
  {
    id: "e10",
    description: "Another book",
    amount: 18.59,
    date: new Date("2022-02-18"),
  },
];
export const ExpenseContext = createContext({
  expenses: [],
  addExpense: ({ description, amount, date }) => {},
  deleteExpense: (id) => {},
  updateExpense: (id, { description, amount, date }) => {},
});
function expenseReducer(state, action) {
  switch (action.type) {
    case "ADD":
      const id = new Date().toString() + Math.random().toString();
      return [{ ...action.payload, id: id }, ...state]; //spreading existing items into array
    case "UPDATE":
      const updatetableExpenseIndex = state.findIndex(
        (expense) => expense.id == action.payload.id
      );
      const updatableExpense = state[updatetableExpenseIndex];
      const updateItem = [...updatableExpense, ...action.payload.data];
      const updatedExpenses = [...state];
      updatableExpense[updatetableExpenseIndex] = updateItem;
      return updatedExpenses;
    case "DELETE":
        return state.filter((expense)=>expense.id!==action.payload);
    default:
      return state;
  }
}
function ExpensesContextProvider({ children }) {
  const [expensesState, dispatch] = useReducer(expenseReducer, DUMMY_EXPENSES);

  function addExpense(expenseData) {
    dispatch({ type: "ADD", payload: expenseData }); //it will dispatch the type of action(handled in reducer function) we need to perform
  }
  function deleteExpense(id) {
    dispatch({ type: "DELETE", payload: id });
  }

  function updateExpense(id, expenseData) {
    dispatch({ type: "UPDATE", payload: { id: id, data: expenseData } });
  }
  const value={
    expense:expensesState,
    addExpense:addExpense,
    deleteExpense:deleteExpense,
    updateExpense:updateExpense,
  }
  return <ExpenseContext.Provider value={value}>{children}</ExpenseContext.Provider>;
}
export default ExpensesContextProvider;

AllExpenses.js

import { useContext } from 'react';
import {Text} from 'react-native';
import ExpensesOutput from '../components/ExpensesOutput/ExpensesOutput';
import {ExpenseContext} from '../store/expenses-context'
function AllExpenses(){
    const expensesCtx=useContext(ExpenseContext);
    return <ExpensesOutput expenses={expensesCtx.expenses} expensesPeriod="Total"/>;
}
export default AllExpenses;

RecentExpenses.js

import { useContext } from "react";
import ExpensesOutput from "../components/ExpensesOutput/ExpensesOutput";
import { ExpenseContext } from "../store/expenses-context";
import { getDateMinusDays } from "../util/date";
function RecentExpenses() {
  const expensesCtx = useContext(ExpenseContext);
  const recentExpenses = expensesCtx.expenses.filter((expense) => {
    const today = new Date();
    const date7DaysAgo = getDateMinusDays(today, 7);
    return expense.date > date7DaysAgo;
  });
  return (
    <ExpensesOutput expenses={recentExpenses} expensesPeriod={"Last 7 Days"} />
  );
}
export default RecentExpenses;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/vi8OAwB