I have an array of data. Like
product = [
{
name: 'item 1',
quantity: 10,
},
{
name: 'item 2',
quantity: 12,
},
{
name: 'item 3',
quantity: 14,
},
]
I want to show this quantity field in TextInput.
So how can I do that and also manage the onChangeText event?
Check this complete example.
import React, { Component } from "react";
import { View, TextInput } from "react-native";
export default class Example extends Component {
state = {
product: [
{
name: "item 1",
quantity: 10
},
{
name: "item 2",
quantity: 12
},
{
name: "item 3",
quantity: 14
}
]
};
onChangeText = ( item, text ) => {
let updateProducts = [...this.state.product]
let index = this.state.product.findIndex(obj => obj.name == item.name)
updateProducts[index].quantity = text;
this.setState({
product: updateProducts
})
}
render() {
return (
<View>
{this.state.product.map(item => (
<TextInput
style={{ height: 40, borderWidth: 1, margin: 5, width: "80%", padding: 5 }}
onChangeText={(text) => this.onChangeText(item, text)}
value={item.quantity}
/>
))}
</View>
);
}
}
Hope this helps you. Feel free for doubts.
First I recommend for you You should read array and list from react native documentation then you should read TextInput properties finally :) Here is working example
https://snack.expo.io/HJm8EOPr8 - react native
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
product : [
{
name: 'item 1',
quantity: 10,
},
{
name: 'item 2',
quantity: 12,
},
{
name: 'item 3',
quantity: 14,
},
]
}
}
render() {
return (
<View style={styles.container}>
{this.state.product.map(item => (
<TextInput value={item.quantity} />
))}
</View>
);
}
}