Remove items from Flatlist doesn't work using Redux

Question

I'm learning React Redux at the moment and I'm working on a food list in which the user can add and remove items from a Flatlist, up until now I worked on adding the items, which works perfectly, now I'm using the same approach to remove the item from the global state foodList, I use onLongPress to start the function createTwoButtonAlert and from there launch removeFromFoodList in the Diet screen. When I run the code and I proceed to remove the items nothing happens, not even in the Terminal, previously I was using a method which also didn't work because instead of deleting the selected item it deleted all items in the Flatlist. Thank you for your help.

Diet

class Diet extends Component {
  

createTwoButtonAlert = (item) =>
Alert.alert(
  "Delete Food",
  "Are you sure to delete this food?",
  [
    {
      text: "Cancel",
      style: "cancel"
    },
    { text: "Delete", 
      onPress: () => this.props.removeFromFoodList(item)
    }
  ]
);

 render() {

       return (

                     <FlatList
                      data={this.props.foodList}
                      renderItem={({item}) => (
                        <View>
                          <TouchableOpacity
                            onLongPress={() => this.createTwoButtonAlert(item)}
                          >
                            <Text>{item.foodName}</Text>
                              <Text>
                                {item.calories}
                              </Text>
                              <MaterialIcons name="arrow-forward-ios" />
                          </TouchableOpacity>
                          </View>
                      )}
                      keyExtractor={item => item.foodId}
                    />

}
}

function mapStateToProps(store){
  return{
      foodList: store.userState.foodList
  };
}

const mapDispatchToProps = { removeFromFoodList };


export default connect(mapStateToProps, mapDispatchToProps)(Diet);

INDEX

import {  ADD_FOOD, REMOVE_FOOD } from "../constants/index";

export const updateFoodList = (foodList) => {
  return { type: ADD_FOOD, payload: foodList}
}

export const removeFromFoodList = (item) => {
  return { type: REMOVE_FOOD, payload: item.foodId}
}

REDUCERS

import { ADD_FOOD, REMOVE_FOOD } from "../constants";

const initialState = {
  foodList: [],
};

export const user = (state = initialState, action) => {
  switch (action.type){
      case ADD_FOOD: 
      return{
        ...state,
        foodList: [...action.payload],
      }
      case REMOVE_FOOD: 
      return{
        ...state,
        foodList: [...state.foodList.filter((item) => item.foodId != action.foodId)],
      }
      default:
        return state
  }
  
};

ARRAY EXAMPLE

Array [
  Object {
    "calories": "120",
    "foodId": 0.8845240802796346,
    "foodName": "Rice",
  },
]

Answer 1

You should be using

foodList: [...state.foodList.filter((item) => item.foodId != action.payload)]