При вводе текста в поле, он дублируется в остальные

Question

У меня есть массив с категориями, в соответствии с категорией отображается поле для ввода, однако при вводе текста в одно поле, он дублируется в остальные сразу. Как можно поправить данную ситуацию, сделать каждый инпут независимым?

const CardDetail = ({route, navigation}) => {

    const itemData = route.params.itemData;
    const [text, setText] = React.useState('');

    return(
        
        <KeyboardAwareScrollView
        showsVerticalScrollIndicator={false}
        style={{flex: 1, backgroundColor: '#fff'}}
        >
            
        <View 
        style={styles.container}>
         <TouchableOpacity style={styles.containerS} onPress={() => {}} >
              <MaterialCommunityIcons style={styles.photo} name="qrcode-scan" size={30} color="green" />
        <View style={styles.container_text}>
            <Text style={styles.title} >
               Сканировать QR код
          
            </Text>
        </View>
        
        <AntDesign style={styles.arrowRHT} name="right" size={24} color="green" />
    </TouchableOpacity>
<View>

</View>
<View style={{width: '90%', alignSelf: 'center'}}>
<Text style={styles.title_two}>{itemData.name}</Text>
<View>

              
{itemData.categories.map((category, index) => (
        <View       key={index}>
                        <TextInput
                
      label={category}
      placeholder={text}
      theme={{colors: {primary: 'green'}}}
      mode="outlined"
      value={text}
      style={{backgroundColor: '#fff', paddingBottom: 10}}
      onChangeText={text => setText(text)}
      defaultValue={text}

/>
        </View>
    ))}
                    <View style={styles.button}>
                    <TouchableOpacity
                    onPress={() => navigation.navigate("PayScreen")}
                    style={[styles.signIn, {backgroundColor: '#27ae60'}]}
                    >
                        <Text style={[styles.textSign, {color: '#fff'}]}>Оплатить</Text>
                    </TouchableOpacity>

                </View>
</View>
</View>
        </View>
        </KeyboardAwareScrollView>
    )
}

Массив с категориями:

export default categors_budget =[
    {
        id: '1',
        image: require("../assets/images/budget/item1.png"),
        name: 'CAT_NAME',
        transactionDate: '25 April 20',
        amount: '$350',
        categories: ['Input_one', 'Input_two', 'Input_three', 'Input_four'],
        credit: true
    },
]

Answer 1

const [text, setText] = React.useState({});
...
value={text[index]}
onChangeText={value=>setText(was=>({...was,[index]:value}))}

БЛОГ НА HUSL

При вводе текста в поле, он дублируется в остальные

Ответы (1 шт):