Flatlist have multiple textinput but state not updating - textinput

Question

I need to ask how to change the state of every text Input if they are in a Flat List with each item separately. According to the item i want to store that text Input value. Here is my code. This is my code i need to save data and want to update the qty according to the item id.
constructor(props) {
super(props)
this.saveData = this.saveData.bind(this);
this.UpdateValue = this.UpdateValue.bind(this);
this.state = {
showToast: false,
qty: 0,
title: 'save',
product: [],
dataSource: [
{
id: 1, qty: 0, title: 'Black Hat', categoryId: 5, categoryTitle: 'MEN', price: 22, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,w_358,x_150/v1500465309/pexels-photo-206470_nwtgor.jpg', description: "Hello there, i'm a cool product with a heart of gold."
},
{ id: 2, qty: 0, title: 'V Neck T-Shirt', categoryId: 2, categoryTitle: 'WOMEN', price: 12, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,x_226,y_54/v1500465309/pexels-photo-521197_hg8kak.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 10, qty: 0, title: 'Black Leather Hat', categoryId: 1, categoryTitle: 'KIDS', price: 2, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 15, qty: 0, title: 'Long Sleeves T-Shirt', categoryId: 5, categoryTitle: 'MEN', price: 120, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,x_100,y_50/v1500465308/pexels-photo-500034_uvxwcq.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 11, qty: 0, title: 'Pink Diamond Watch', categoryId: 5, categoryTitle: 'MEN', price: 22, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 22, qty: 0, title: 'Golden Tie', categoryId: 2, categoryTitle: 'WOMEN', price: 12, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 100, qty: 0, title: 'Black Pearl Earrings', categoryId: 1, categoryTitle: 'KIDS', price: 2, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_center,h_250/v1500465307/pexels-photo-262226_kbjbl3.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 215, qty: 0, title: 'Grey Blazer', categoryId: 5, categoryTitle: 'MEN', price: 120, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 12, qty: 0, title: 'Mirror Sunglasses', categoryId: 5, categoryTitle: 'MEN', price: 22, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250/v1500465307/pexels-photo-488541_s0si3h.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 29, qty: 0, title: 'White Shirt', categoryId: 2, categoryTitle: 'WOMEN', price: 12, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
{ id: 16, qty: 0, title: 'Tie', categoryId: 1, categoryTitle: 'KIDS', price: 2, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." }
]
}
}
async saveData(item) {
console.log("We are in Save function")
var product = [];
var items = {
id: item.id,
title: item.title,
image: item.image,
price: item.price,
description: item.description,
qty: this.state.qty,
categoryTitle: item.categoryTitle,
}
const value1 = await AsyncStorage.getItem("Cart");
if (value1 === "" || value1 === null) {
product.push(items);
console.log(JSON.stringify(product));
AsyncStorage.setItem("Cart", JSON.stringify(product));
}
else if (items.qty <= 0 || items.qty == "" || items.qty == "undefined") {
//ToastAndroid.show('please enter quantity!', ToastAndroid.SHORT);
alert("pls enter quantity")
}
else {
var prodsArr = JSON.parse(value1);
for (var i = 0; i < prodsArr.length; i++) {
var item = prodsArr[i];
//console.log(JSON.stringify(item))
if (item.id === items.id) {
return (
this.setState({
}), alert(qty)
)
prodsArr.push(items)
AsyncStorage.setItem("Cart", JSON.stringify(prodsArr))
}
}
prodsArr.push(items);
console.log(JSON.stringify(prodsArr));
AsyncStorage.setItem("Cart", JSON.stringify(prodsArr))
ToastAndroid.show('item added!', ToastAndroid.SHORT);
}
}
UpdateValue = (update) => {
this.setState({ qty: update })
this.update = update;
}
renderItem = ({ item, index }) => {
return (
<ListItem>
<View>
<Image style={{ width: 280, height: 250 }} source={{ uri: item.image }} />
<KeyboardAvoidingView behavior="padding" style={{ flex: 1, alignItems: 'center', margin: 5 }}>
<TextInput
keyboardType="numeric"
multiline={false}
value={this.state.qty}
onChangeText={this.UpdateValue.bind(this)}
underlineColorAndroid="transparent" placeholder="0"
style={{ height: 30, width: 50, borderWidth: 0.5, borderColor: 'cyan', justifyContent: 'center' }}
/>
</KeyboardAvoidingView>
<Button title={this.state.title} onPress={this.saveData.bind(this, item)}> </Button>
<Button title="Cart" onPress={() => this.props.navigation.navigate('Second')} />
</View>
</ListItem>
);
}
render() {
return (
<View>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem.bind(this)}
keyExtractor={(item, index) => item.id}
keyboardShouldPersistTaps="always"
/>
</View>
)
}
};