title: Append TextInput component one after another when press button in React Native
body: <p>I am new in <code>React Native</code>. </p>
  
  <p>I am using two button to add <code>TextInput</code> component in the view.
  When I press <code>Add</code> button, it pushes one <code>TextInput</code> component into the view and when I press <code>Add Again</code> button, it pushes another <code>TextInput</code> component below previous one. </p>
  
  <p>But when I press <code>Add</code> button again, it pushes the <code>TextInput</code> component below the first one. But I want to push it below the last one. </p>
  
  <p>Like : <code>Add |Add | Add again.</code> </p>
  
  <p>But I need <code>Add | Add Again | Add</code> and so on. </p>
  
  <p>What can be done to achieve this ?
  I have followed <a href="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=2&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwjXsYzmqJvPAhVC3GMKHT8eBjkQFgghMAE&amp;url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F35524026%2Freact-native-dynamically-add-element-to-dom-on-button-press&amp;usg=AFQjCNEwa8nzc2b7cq4Apkjr4Szy9QY7kg&amp;sig2=YijPjx_aD5i01O2R3aOQdw" rel="nofollow">this</a>.</p>
  
  <pre><code>'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) =&gt; {
      return (
        &lt;View key={ i } style={styles.insertStyle}&gt;
          &lt;TextInput placeholder = 'abc' /&gt;
        &lt;/View&gt;
        );
  })
  let arrAnother = this.state.arr.map((r, i) =&gt; {
      return (
        &lt;View key={ i } style={styles.insertStyle}&gt;
          &lt;TextInput placeholder = 'def' /&gt;
        &lt;/View&gt;
        );
  })
  
  return (
    &lt;View style={styles.container}&gt;
    &lt;View&gt;
      &lt;TouchableHighlight 
        onPress={ this.insertSomeThing.bind(this) } 
        style={styles.button}&gt;
          &lt;Text&gt;Add&lt;/Text&gt;
      &lt;/TouchableHighlight&gt;
    &lt;/View&gt;
    &lt;View&gt;
      &lt;TouchableHighlight 
        onPress={ this.insertSomeThing.bind(this) } 
        style={styles.button}&gt;
          &lt;Text&gt;Add Again&lt;/Text&gt;
      &lt;/TouchableHighlight&gt;
    &lt;/View&gt;
    { arr }
    {arrAnother}
    &lt;/View&gt;
  );
  }
  }
  
  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', () =&gt; Test);
  </code></pre>