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!

Answer 1

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>
    );
};

Answer 2

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}
  />  

Answer 3

In my situation I had to do it this.

const [reasonItems, setReasonItems] = useState([]);

const onTextChangedReason = (value,index) => {
    let newState = [...reasonItems];
    newState[index] = value;
    setReasonItems(newState);
}

const renderItem = ({item, index}) => {
    return (
      <View>
        <TextInput
           value={reasonItems[index]}
           onChangeText={(text) => onTextChangedReason(text,index)}
        />
      </View>
    );
};

Note : if your FlatList is wrapped within a ScrollView not imported from react-native will make the TextInput lose focus on input e.g

import { ScrollView } from 'react-native';

with the above you would have a well-behaved TextInput

but with the below will give you an inconsistent result

import { ScrollView } from 'react-native-virtualized-view';