CODEWITHSUNDEEP
javascriptarraysreactjsreact-nativereact-redux
Salvo
Salvo

Reputation: 107

Function removes all items from Flatlist, instead of selected one

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 removeFromFoodList in the Diet screen. When I run the code and I proceed to remove the items instead of deleting the single item it deletes all the items in the Flatlist. Thank you for your help.

Diet

class Diet extends Component {
  

removeItem = () => {
    let foodList = this.props.foodList;
    this.props.removeFromFoodList(foodList)
  }

 render() {

       return (

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

}
}

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 = (foodList) => {
  return { type: REMOVE_FOOD, payload: foodList}
}

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.id != action.id)],
      }
      default:
        return state
  }
  
};

ARRAY EXAMPLE

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

Upvotes: 0

Views: 42

Answers (2)

ANDRIAMANAMPISOA Andriniaina M
ANDRIAMANAMPISOA Andriniaina M

Reputation: 116

On the component Diet this.props.foodList contain all data of the flatlist it's ok , you pass it to the flatlist to be rendered , alwais ok , but on each item of Flatlist you have added on each a onLongPress={this.removeItem} the function removeItem execute removeFromFoodList that you put this.props.foodList as a parameters to be removed .. that why all list are removed

to fix this you need to pass a item value to removeItem():

    removeItem = (itemToremove) => {
  this.props.removeFromFoodList(itemToremove)
}

render() {

  return (

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

Upvotes: 1

ᴓᴓᴓ
ᴓᴓᴓ

Reputation: 1166

I'm not sure why it returns as empty, but there are a few problems I see here.

In your reducer: [...state.foodList.filter((item) => item.id != action.id)]

If the structure of foodlist is as provided:

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

Then it has no id key, and even if it does, action.id doesn't exist (only action.type and action.payload exist). Try console logging action and state.foodList under case REMOVE_FOOD: to get more detail.

Upvotes: 1

Related Questions