CODEWITHSUNDEEP
react-native
Amrita Stha
Amrita Stha

Reputation: 3327

Get the input data from TextInputs which are programatically added using a button

I've a screen where there is a button to add textInputs. Any no. of inputs can be added by the user. There is another button named submit. When it is tapped, how can I get the appropriate input values. I need them in array eg: [{name1, designation1}, {name2, designation2}, ...].

Code:

App.js

export default class App extends React.Component {
  state = {
    myArr: []
  }

  _onPressOut() {
    let temp = index ++
    this.state.myArr.push(temp)
    this.setState({
        myArr: this.state.myArr
    })
  }

  _getData() {
    //how can I get the data from input values here?
  }

  render() {

    let Arr = this.state.myArr.map((a, i) => {
      return <NewComponent />                          
    }) 
    return (
      <ScrollView>
        <View style={styles.container}>
            <Text>Event 1st</Text>
            { Arr }
            <Text>Eventlast</Text>
        </View>
        <TouchableOpacity onPress={() => this._onPressOut()}>
          <Text style={{ color: 'green' }}>Add New Component</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => this._getData()}>
          <View style={{ backgroundColor: 'blue', marginTop: 30 }}>
          <Text style={{ color: 'white', textAlign: 'center', marginVertical: 10 }}>Submit</Text>
          </View>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

NewComponent.js

class NewComponent extends React.Component{
  state = {
    name: '',
    designation: '',
  }

  onNameChange = (text) => {
    this.setState({
      name: text,
    });
  }

  render () {
    return (
      <View style={{ borderTopWidth:2, borderBottomColor: 'red', paddingTop: 20, marginTop: 30 }}>
        <TextInput
          placeholder={'Enter Your Name'}
          onChangeText={text => {
            this.onNameChange(text);
            // this.onPropValueChange('SignUpName', text);
          }}
          value={this.state.name}
          style={[{borderBottomColor:'red', borderBottomWidth: 1}]}
        />  

        <TextInput
          placeholder={'Designation'}
          onChangeText={text => {
            this.onDesignationChange(text);
            // this.onPropValueChange('SignUpDesignation', text)
            }
          }
          value={this.state.designation}
          style={[{borderBottomColor:'red', borderBottomWidth: 1}]}
        />  

      </View>
    );
  }
}

Upvotes: 0

Views: 37

Answers (1)

Radhika Padiyar
Radhika Padiyar

Reputation: 351

Considering the following assumptions that,until the name is filled,the designation cannot be filled and until the one set of name and designation are filled, the next set of inputs should not be rendered, In NewComponent.js for the destinationTextInput, make the following changes.

 <TextInput
      placeholder={'Designation'}
      onChangeText={text => {
        this.onDesignationChange(text);
        // this.onPropValueChange('SignUpDesignation', text)
        }
      }
      value={this.state.designation}
      style={[{borderBottomColor:'red', borderBottomWidth: 1}]}
      onBlur = {() => {this.props.onNameAndDesignationAdded(this.state.name,this.state.designation)}}
    />

And in App.js add the following in state object, introduce a new state called resultArr as follows: 

 state = {
        myArr: [],
        resultArr : []
      }

The _getData function will be as follows:

 _getData(name,designation) {
    //how can I get the data from input values here? 
    if(name,designation) {
let tempArr = this.state.resultArr;
      tempArr.push({name, designation})
       this.setState({resultArr : tempArr})

  }
  }

The NewComponent called in App.js will have a callback from the TextInput of destination input onBlur method. 

 let Arr = this.state.myArr.map((a, i) => {
      return <NewComponent onNameAndDesignationAdded = {(name,designation) => {
      this._getData(name,designation)

      } } />                          
    })

Upvotes: 1

Related Questions