CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxreact-hooks
Harsh Mishra
Harsh Mishra

Reputation: 978

TypeError: undefined is not an object (evaluating 'availableMeals.filter'). I don't why I am getting this error

I am using the useSelector() hook to pass state as a prop but I am getting an error saying:

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

/store/reducers/meals.js:

import { MEALS } from "../../Data/Dummy-Data";

const intialState = {
  meals: MEALS,
  filteredMeals: MEALS,
  FavouriteMeals: [],
};

const mealsReducer = (state = intialState, action) => {
  return action;
};

export default mealsReducer;

CategoryMealScreen.js:

import React from "react";
import { useSelector } from "react-redux";

import { CATEGORIES } from "../Data/Dummy-Data";
import MealListData from "../component/mealListData";

const CategoryMealScreen = (props) => {
  const catId = props.navigation.getParam("categoryId");
  const availableMeals = useSelector((state) => state.meals.filteredMeals);
  const DisplayedMeal = availableMeals.filter(
    (meal) => meal.categoryIds.indexOf(catId) >= 0
  );

  return (
    <MealListData listData={DisplayedMeal} navigation={props.navigation} />
  );
};
CategoryMealScreen.navigationOptions = (navigationData) => {
  const catId = navigationData.navigation.getParam("categoryId");
  const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);
  return {
    headerTitle: selectedCategory.title,
  };
};

export default CategoryMealScreen;

I don't know why I am getting this error.

Upvotes: 0

Views: 589

Answers (1)

Shyam
Shyam

Reputation: 5497

The issue is with your reducer ,

const mealsReducer = (state = intialState, action) => {
  return action;
};

You are returning an action instead of state . Please change this to

const mealsReducer = (state = intialState, action) => {
      return state;
    };

Upvotes: 2

Related Questions