CODEWITHSUNDEEP
javascriptreactjsreact-native
nothingimp
nothingimp

Reputation: 79

How to get values from dynamically created textInput in React Native?

I am getting an count from user selection - for example when user selects 5 means i will be getting

const count = 5;

And by keeping this, am dynamically creating textInput using for loop, and its working perfectly ! but how to store the values in state when user type ? I could not understand how to perform this action ! I have tried this , but it gives error saying value should not contain array as input,

 state = { userDetails: [] }

textHandler(texts){
        this.setState({...this.state.userDetails, texts})
    }

for (let i = 0; i < count; i++) {
            items.push(
    <TextInput 
           style={{ borderBottomWidth: 1, borderColor: '#f0eff4', height: 40 }}
           placeholder="Enter Name"
           onChangeText={text => this.textHandler(text)}
           value={this.state.userDetails}
   /> ) }

Upvotes: 1

Views: 680

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

This might help (Updated)

class App extends Component {
  
  componentDidMount() {
    this.getDynamicInputs();
  }

  state = { userDetails: [], item_views: [] };

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

  getDynamicInputs() {
    const inputData = [];
    for (let i = 0; i < count; i++) {
      inputData.push(
        <TextInput
          key={i}
          style={{ borderBottomWidth: 1, borderColor: "#f0eff4", height: 40 }}
          placeholder="Enter Name"
          onChangeText={(val) => this.updateState(i, val)}
          value={this.state.userDetails[i]}
        />
      );
    }
    this.setState({ item_views: inputData });
  }

  render() {
    console.log(this.state.userDetails);
    return <View style={styles.app}>{this.state.item_views}</View>;
  }
}

const styles = StyleSheet.create({
  app: {
    flex: 1,
    backgroundColor: "pink"
  }
});

export default App;

Upvotes: 2

Related Questions