how to handle multiple textInput states created dynamically in React Native

Question

How we can access values from dynamically created Text Input. Like flat list creates 3 text inputs and then on click of button we validate which one is added and which one not. How to manage multiple state array. currently I done this

const data = [1,2];

constructor(props) {
super(props);
this.state = {
  Textdata:[],
};

}

  SubmitButton(){
//how to access those text input values and add to array
}


<FlatList
data={data}
renderItem={this.renderItem}
keyExtractor={(item, index) => item}
 />

renderItem = ({ item, index }) => {

return (
    <View>
     <Item 
        floatingLabel 
        style={styles.InputBoxStyle}
        >
        <Label>First Name</Label>
        <Input 

          />
     </Item>
     <Item 
        floatingLabel 
         style={styles.InputBoxStyle}>
         <Label>Last Name</Label>
        <Input 

          />
      </Item>
<Button rounded
        onPress={this.SubmitButton}>
        <Text>Submit</Text>
     </Button>

    </View>
 );
};

Nikolay Tomitov · Accepted Answer · 2018-09-26 12:43:45Z

1

You can store the text of inputs in your state. Just listen for onChangeText event. Try to add this to your input :

onChangeText={val => updateState(index, val) />

Where index is your item's index from renderItem function. Later add method :

updateState = (index,value) => {
   const Textdata = [...this.state.Textdata]; //make a copy of array
   Textdata[index] = value;
   this.setState({ Textdata: Textdata });
}

Then when pressing the button you can verify this array.

As another example, when value from Picker component changes you can handle it in this way:

onValueChange={itemValue => this.setState({someNameForThisPicker: itemValue})}

edited Sep 26, 2018 at 12:43

answered Sep 26, 2018 at 7:53

Nikolay Tomitov

9475 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Namrata Shinde Over a year ago

Thank you this solution is working. How to handle picker(dropdown) & its selected state array.

Nikolay Tomitov Over a year ago

Basically the same way - on some event (onChange, onPress, etc.) attach a function that will update your state. Don't forget to make a copy of the data, you're going to update.

Namrata Shinde Over a year ago

I have tried onValueChange method by providing function to it change the state of the selected picker, Please Can you provide the sample example

Namrata Shinde Over a year ago

I have tried given solution but still its not working. will you help where am I going wrong? link

Nikolay Tomitov Over a year ago

86 line : newArray[value] = index; -> change that to newArray[index] = value; And : swap arguments in onValueChange function -> onValueChange(index: number, value: string)

Collectives™ on Stack Overflow

how to handle multiple textInput states created dynamically in React Native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related