TextInput in FlatList Item

Question

I have a problem like picture below: Text

As you guy can see I have info on every item: name and stock. Now I want to update stock on single item by type a number to text Input But when I type 3 into 1 Text Input, it fills 3 in all the remaining Text Input. This is my render Item:

renderItem = ({item}) => {
    return (
      <View style={styles.card}>
        <TouchableOpacity
          onPress={() => {
            setCreateAt(item.WarehouseProduct.createdAt);
            setNote(item.note);
            setShowModal(true);
          }}>
          <Image
            style={styles.tinyLogo}
            source={require('../assets/images/fish.jpg')}
          />
        </TouchableOpacity>
        <View
          style={{
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            marginLeft: 5,
            height: 75,
            width: 160,
          }}>
          <Text numberOfLines={2} style={styles.text}>
            {item.name}
          </Text>
          <Text style={styles.text}>
            {item.WarehouseProduct.stock.toString()}
          </Text>
        </View>
        <View style={styles.iconcontainer}>
          <Button title="clear" onPress={() => console.log(text)} />
        </View>
        <View
          style={{
            alignSelf: 'center',
            marginLeft: 20,
            borderWidth: 1,
            borderRadius: 10,
          }}>
          <TextInput
            style={{height: 40, width: 50}}
            keyboardType="numeric"
            onChangeText={(income) => setText(income)}
            value={text}
          />
        </View>
      </View>
    );
  };

Can anyone help me solve this problem? Just give me an idea. Thanks all!

Thoroughly answering questions is time-consuming. If your question is solved, please accept the solution. The ✔ is below the ▲/▼ arrow, at the top left of the answer. A new solution can be accepted if a better one shows up. You may also vote on the usefulness of an answer with the ▲/▼ arrow if you have a 15+ reputation. Leave a comment if a solution doesn't answer the question. more information https://stackoverflow.com/help/someone-answers. Thank you — nima, Oct 02 '21 at 09:58

score 0 · Answer 1 · answered Nov 03 '20 at 08:20

anything you put in renderitem will be rendered as much as your data in flatlist

<Flatlist 
  data={containtmultipledata}
  renderItem={
    ....
    <TextInput
        style={{height: 40, width: 50}}
        keyboardType="numeric"
        onChangeText={(income) => setText(income)}
        value={text}
      />
    ....
  }
>

but you asign it to single value

you can change data you put in flatlist directly by index in item

 <TextInput
    style={{height: 40, width: 50}}
    keyboardType="numeric"
    onChangeText={(txt) => containMultipledata[index].yourObjectName = txt}
    value={item.yourObjectName}
  />

score 0 · Answer 2 · answered Nov 03 '20 at 08:24

Try this way

const [data, setData] = useState([... flat list data here default]);

const onTextChanged = (index, value) => {
    const data = [...data]; 
    data[index].availableStock = value; <-- "availableStock" is example key for showing way out of this -->
    setData(data);
}

renderItem = ({item, index}) => {
    return (
      <View style={styles.card}>
        ......
        <TextInput
            ...
            onChangeText={(income) => onTextChanged(index, income)}
            value={item.availableStock || 0}
          />
      </View>
    );
};

TextInput in FlatList Item

2 Answers2