如何更改 Flatlist 中的 textInput 值 react native？

Question

I am working with a list of products I need to modify the quantities but I can not modify the inputText that contains the quantity with the (+) and (-) buttons

I appreciate any help..thanks

I can not work with stados because you only have to change one row at a time

I would like to know a good way so that when I press the buttons the number will be modified in each of the lines try with states but I change the content of all the inputs

code:

 <View style={styles.containerPro}> <List containerStyle={{borderTopWidth: 0, borderBottomWidth: 0}} key={this.state.coins.length} dataSource={this.state.number}> <FlatList extraData={this.state} data={this.state.coins} keyExtractor={(item) => item.id} renderItem={({item}) => { let num = 0; this.state={ numb:num, }; let url = 'http://laeconomiadelsur.com/upload/' + item.foto; const tableData = [ [<View> <Image source={{uri: url}} style={{ width: 50, height: 70, }}/> </View>, ], [<View style={styles.cellIcons}> <Text style={styles.textCells}> {item.nombre}</Text> <Text style={styles.textCellsDescription}> {item.descripcion}</Text> <Text style= {styles.textCellsPrecio}>${item.precio.toLocaleString()} </Text> </View>, ], [<View> <Text style={styles.cantidad1}>subtotal: <Text>$300000</Text></Text> <View style={styles.buttonsAdd}> <TouchableOpacity style={styles.button1} navigation={this.props.navigation} onPress={()=>{ num = num-1; console.log(num) }} > <Text>-</Text> </TouchableOpacity> <TextInput style={styles.textSum} value={this.state.numb.toString()} placeholder="0" underlineColorAndroid={"transparent"} /> <TouchableOpacity style={styles.button2} navigation={this.props.navigation} onPress={(num) => { num = num +1; console.log(num) } } > <Text>+</Text> </TouchableOpacity> </View> <Text style={styles.cantidad}>cantidad</Text> </View>,] ]; return ( <View style={{flex: 1}} key={item.id}> <Table style={styles.table} borderStyle={{borderWidth: 2, borderColor: 'white'}} key={item.id}> <Cols data={tableData} flexArr={[1, 2, 2]} style={styles.cells} key={item.id}/> </Table> </View> ); }} /> </List> </View>

Answer 1

Create a separate component for tableData. And using

shouldComponentUpdate() 

inside the tableData component you render only component you want. There is a good reading about life cycle https://reactjs.org/docs/react-component.html and about

shouldComponentUpdate() 

you can read from here

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

what eh solved using: react-native-numeric-input