Data not coming in table - react-native

Question

I am trying to add selected item data in an SQLite cart table but it's not getting filled :
SelectItem is selecting the item and in console it's showing and all fields are not null or undefined. All fields have data but still it's not working:
const SelectItem = id => {
console.log('Inside SelectItem');
itemData.filter((val, i) => {
if (val.itemid == id) {
const DATAs = {
itemid: val.itemid,
itemname: val.itemname,
qty: qty,
discount: disc,
price: 100,
amount: 100 * qty,
netamount: 100 * qty - disc,
};
console.log(
'{' +
DATAs.itemid +
', ' +
DATAs.itemname +
', ' +
DATAs.qty +
', ' +
DATAs.price +
', ' +
DATAs.discount +
', ' +
DATAs.netamount +
'}',
);
try {
console.log('Inside try');
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO tmpCart (orderdate, partyid, partyname, partyaddress, itemid, itemname, qty, price, amount, discount, netamount) VALUES (?,?,?,?,?,?,?,?,?,?,?)',
[
new Date().toLocaleDateString(),
route.params.custObj.partyid,
route.params.custObj.partyname,
route.params.custObj.partyname,
DATAs.itemid,
DATAs.itemname,
DATAs.qty,
DATAs.price,
DATAs.amount,
DATAs.discount,
DATAs.netamount,
],
(tx, results) => {
console.log('Results', results.rowsAffected);
if (results.rowsAffected > 0) {
alert(
'Success',
'You are Registered Successfully',
[
{
text: 'Ok',
onPress: () => navigation.navigate('Menu'),
},
],
{cancelable: false},
);
} else alert('Registration Failed');
},
);
});
} catch (err) {
console.log('ERROR tmpCart: ' + err);
}
}
});
};
I checked all console.logs and the data is OK but is not filling the table and when I print data in cart page the array is empty :
[]
cart page:
const Cart = () => {
const [cartData, setCartData] = useState([]);
const [searchFilter, setSearchFilter] = useState('');
useEffect(() => {
setCartData(getCartData(db));
}, []);
useEffect(() => {
console.log(cartData);
}, [searchFilter]);
return (
<View>
<Search ph={'Search cart'} setSearchFilter={setSearchFilter} />
<FlatList
extraData={searchFilter}
data={cartData.filter(item => {
if (searchFilter === '') {
return item;
} else if (
item.partyname
.toString()
.toLowerCase()
.includes(searchFilter.toLowerCase())
) {
console.log(item);
return item;
}
})}
renderItem={({item}) => (
<Text style={{color: '#fff'}}>{item.itemname}</Text>
)}
keyExtractor={item => item.itemid}
/>
</View>
);
};