sum items of Flatlist on react native - sqlite

Question

I'm making an app that makes a bill of items and the user can identify the quantity of every item
and at least there is a text tag which it shows the total price after hitting " get bill " button
it works fine , but the issue is after hitting the button the items are repeated again
[here a screenshot of the app after hitting a 'get bill' button]: https://i.stack.imgur.com/slOWN.jpg
this is the code :
import React, { Component } from "react";
import { View, FlatList, Dimensions, Text } from "react-native";
import * as SQLite from "expo-sqlite";
import { Button } from "react-native-elements";
import NumericInput from "react-native-numeric-input";
const db = SQLite.openDatabase("db.db");
class CreateBill extends Component {
constructor() {
super();
this.state = {
items: [],
itemsList: [],
products: [],
totalPrice: 0,
};
}
async componentDidMount() {
console.log("did mount");
db.transaction((tx) => {
tx.executeSql("SELECT * FROM products2", [], (tx, results) => {
var temp = [];
for (let i = 0; i < results.rows.length; ++i) {
temp.push(results.rows.item(i));
}
this.setState({
products: temp,
});
});
});
}
checkItems = () => {
this.state.items.forEach((item) => {
this.state.products.forEach((product) => {
if (item === product.code) {
console.log("equals", item, product.code);
this.state.itemsList.push({ product, number: 0 });
} else {
console.log("doesnt equal", item.item, product.code);
}
});
});
};
getPrice = () => {
let price = 0;
this.state.itemsList.forEach((element) => {
price = element.number * element.product.price;
});
this.setState({ totalPrice: price });
};
render() {
this.state.items = this.props.route.params.items;
this.checkItems();
return (
<View style={{ flex: 1 }}>
<FlatList
data={this.state.itemsList}
extraData={this.state}
style={{ marginTop: 50, flex: 1, width: Dimensions.width }}
keyExtractor={(item) => item.product.id}
renderSeparator={() => (
<View
style={{
backgroundColor: "#1B73B4",
height: 0.6,
}}
/>
)}
renderItem={({ item, index }) => {
console.log("item", item);
return (
<View
style={{
flexDirection: "row",
width: Dimensions.width,
paddingStart: 20,
alignItems: "center",
}}
key={item}
>
<View style={{ flex: 0.5, alignItems: "center" }}>
<Text style={{ fontSize: 24 }}>{item.product.name}</Text>
</View>
<View style={{ flex: 0.5, justifyContent: "center" }}>
<NumericInput
value={this.state.itemsList[index].number}
onChange={(value) => {
let item1 = this.state.itemsList[index];
item1.number = value;
console.log(
this.state.itemsList[index].product.name,
this.state.itemsList[index].number
);
}}
totalWidth={140}
totalHeight={45}
iconSize={25}
maxValue={this.state.itemsList[index].product.units}
minValue={0}
valueType="integer"
rounded
textColor="#1B73B4"
iconStyle={{ color: "white" }}
rightButtonBackgroundColor="#1B73B4"
leftButtonBackgroundColor="#1B73B4"
/>
</View>
</View>
);
}}
/>
<Text>{this.state.totalPrice}</Text>
<Button title="get bill" onPress={() => this.getPrice()} />
</View>
);
}
}
export { CreateBill };

Answer 1

In your case reduce is the best option:
Documentation here
Example:
const totalPrice = this.state.itemsList.reduce((total, element) =>
total += element.number * element.product.price
,0);
this.setState({ totalPrice });