React Native. Flatlist order changes when updating item - react-native

Question

Click here for Example
Hello all.
I have a small issue with a React Native Flatlist.
It takes the items from Redux store, but when i try to update the amount, with redux as well it changes me the order of the list. Except in last item.
If you encountered similar issue let me know.
Thanks in advance
So far i discovered that the increase and decrease functions in Cart Item changes the order of my array.
These are the components i'm using to render the list.
CART LIST
import React from "react";
import { FlatList } from "react-native";
import CartItem from "./CartItem";
const CartList = ({ data }) => {
return (
<React.Fragment>
{data && (
<FlatList
showsVerticalScrollIndicator={false}
data={data}
renderItem={({ item }) => <CartItem item={item} />}
keyExtractor={(item) => console.log(item)}
/>
)}
</React.Fragment>
);
};
export default CartList;
CART ITEM
import React, { useCallback } from "react";
import { View, Text, StyleSheet, Image } from "react-native";
import IncreaseDecrease from "./IncreaseDecrease";
// Theme
import { Theme } from "../../Theme";
const colors = Theme.colors;
// Redux
import { useDispatch, useSelector } from "react-redux";
import {
updateQuantity,
removeFromCart,
} from "../../Redux/Actions/cartActions";
const CartItem = React.memo(({ item }) => {
const dispatch = useDispatch();
const { cart } = useSelector((state) => ({
cart: state.cart.cart,
}));
const increaseQuantity = useCallback(
() => {
let currentProduct = cart.filter((el) => el.product.id === item.product.id);
let quantity = currentProduct[0].quantity + 1;
dispatch(updateQuantity(item.product.id, quantity));
},
[],
);
const decreaseQuantity = useCallback(
() => {
let currentProduct = cart.filter((el) => el.product.id === item.product.id);
let quantity = currentProduct[0].quantity - 1;
if (quantity == 0) {
dispatch(removeFromCart(item.product.id));
} else {
dispatch(updateQuantity(item.product.id, quantity));
}
},
[],
);
return (
<React.Fragment>
{item && (
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: item.product.image }} />
</View>
<View style={styles.textContainer}>
<Text
style={[styles.text, { fontSize: 16, color: colors.darkGrey }]}
>
{item.product.name}
</Text>
</View>
<View style={styles.quantity}>
<IncreaseDecrease
quantity={item.quantity}
increase={increaseQuantity}
decrease={decreaseQuantity}
/>
</View>
<View style={styles.priceContainer}>
<Text
style={[styles.text, { fontSize: 16, color: colors.darkGrey }]}
>
${item.product.price * item.quantity}
</Text>
</View>
</View>
)}
</React.Fragment>
);
});
INCREASE DECREASE
import React from "react";
import { View, StyleSheet, Text } from "react-native";
import PropTypes from "prop-types";
import Icon from "react-native-vector-icons/Ionicons";
// Theme
import { Theme } from "../../Theme";
import { TouchableOpacity } from "react-native";
const colors = Theme.colors;
// Types
const propTypes = {
quantity: PropTypes.number,
increase: PropTypes.func,
decrease: PropTypes.func,
};
// Default Props
const defaultProps = {
quantity: 0,
};
const IncreaseDecrease = ({ quantity, increase, decrease }) => {
return (
<View style={styles.container}>
<TouchableOpacity onPress={decrease}>
<View style={styles.button}>
<Icon name={"remove"} size={20} color={colors.white} />
</View>
</TouchableOpacity>
<View style={styles.input}>
<Text>{quantity}</Text>
</View>
<TouchableOpacity onPress={increase}>
<View style={styles.button}>
<Icon name={"add"} size={20} color={colors.white} />
</View>
</TouchableOpacity>
</View>
);
};
REDUCER:
case UPDATE_QUANTITY:
let item = cart.find(
(item) => item.product.id == action.payload.productId
);
let newCart = cart.filter(
(item) => item.product.id != action.payload.productId
);
item.quantity = action.payload.quantity;
newCart.push(item);
return {
...state,
cart: newCart,
};

Answer 1

Okay i got it.
The issue was in my reducer, i was pushing a new updated element to a new array.
The solution is to change the element and update through the index.
Here is my solution:
REDUCER:
case UPDATE_QUANTITY:
let item = cart.find(
(item) => item.product.id == action.payload.productId
);
let index = cart.indexOf(item)
item.quantity = action.payload.quantity;
let newCart = cart.slice()
newCart[index] = item
return {
...state,
cart: newCart,
};

Answer 2

In your reducer what you are doing is finding the item whose quantity is to be updated. Update its quantity and push that item to the end of the list.
Hence changing the order of items in the cart.
Instead, you should try to find the index of the item to be updated, replace the quantity property in the cart object at that index with a new one and the order of the list will be preserved.
Try this -
case UPDATE_QUANTITY:
let itemIndex = cart.findIndex(
(item) => item.product.id == action.payload.productId
);
let newCart = [...state.cart];
newCart[itemIndex].quantity = action.payload.quantity;
return {
...state,
cart: newCart,
};