Satan Pandeya Satan Pandeya - 2 months ago 29
Android Question

Append TextInput component one after another when press button in React Native

I am new in

React Native
.

I am using two button to add
TextInput
component in the view.
When I press
Add
button, it pushes one
TextInput
component into the view and when I press
Add Again
button, it pushes another
TextInput
component below previous one.

But when I press
Add
button again, it pushes the
TextInput
component below the first one. But I want to push it below the last one.

Like :
Add |Add | Add again.


But I need
Add | Add Again | Add
and so on.

What can be done to achieve this ?
I have followed this.

'use strict';

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
TextInput,
} from 'react-native';

let index = 0

class Test extends Component{
constructor(){
super();
this.state = {
arr: []
};
}
insertSomeThing(){
this.state.arr.push(index++)
this.setState({ arr: this.state.arr })
}

render() {
let arr = this.state.arr.map((r, i) => {
return (
<View key={ i } style={styles.insertStyle}>
<TextInput placeholder = 'abc' />
</View>
);
})
let arrAnother = this.state.arr.map((r, i) => {
return (
<View key={ i } style={styles.insertStyle}>
<TextInput placeholder = 'def' />
</View>
);
})

return (
<View style={styles.container}>
<View>
<TouchableHighlight
onPress={ this.insertSomeThing.bind(this) }
style={styles.button}>
<Text>Add</Text>
</TouchableHighlight>
</View>
<View>
<TouchableHighlight
onPress={ this.insertSomeThing.bind(this) }
style={styles.button}>
<Text>Add Again</Text>
</TouchableHighlight>
</View>
{ arr }
{arrAnother}
</View>
);
}
}

var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60,
},
insertStyle: {
height:40,
alignItems: 'center',
justifyContent: 'center',
borderBottomColor: '#ededed',
borderBottomWidth: 1
},
button: {
alignItems: 'center',
justifyContent: 'center',
height:55,
backgroundColor: '#ededed',
marginBottom:10
}
});

AppRegistry.registerComponent('Test', () => Test);

Answer

The problem is that you are calling insertSomeThing function and this function push a new <Text> in variable arr and then it is rendered in the following order:

</View>
    { arr }
    {arrAnother}
</View>

If you want to insert a different TextView at the end of the list you must remove {arrAnother} and modify your map functions. Your code will look like this:

insertSomeThing( placeholder ){
  this.state.arr.push({index:index++, placeholder:placeholder});
  this.setState({ arr: this.state.arr });
}

render() {
  let arr = this.state.arr.map((r, i) => {
    return (
      <View key={ i } style={styles.insertStyle}>
        <TextInput placeholder = {r.placeholder} />
      </View>
    );
  });

  return (
    <View style={styles.container}>
      <View>
        <TouchableHighlight 
          onPress={ () => this.insertSomeThing('add') } 
          style={styles.button}>

          <Text>Add</Text>
        </TouchableHighlight>
      </View>
      <View>
        <TouchableHighlight 
          onPress={ () => this.insertSomeThing('addAgain') } 
          style={styles.button}>
             <Text>Add Again</Text>
        </TouchableHighlight>
      </View>
      { arr }
    </View>
  );
}

EDIT

To handle onChangeText your TextInput will look like this:

let arr = this.state.arr.map((r, i) => {

    var ref = 'textinput'+i;

    return (
      <View key={ i } style={styles.insertStyle}>
        <TextInput ref={ref} onChangeText={(text) => this._onChangeText(text,ref)} />
      </View>
    );
  });

You have to define _onChangeText in your component to handle the event. You will receive text and reference to the input. You later can reference the input using this.refs[ref].