title: How to add multiple views on button click using react native?
body: <p>I am new to react native and I would like to add a new view each time the plus button is pressed I have tried a few things myself but I haven't been successful so far.
  My end goal is to add a input fields for passenger details each time the user hits the plus button something similar tothe google trips app.
  Following is the code that I have been trying to execute:-</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Form, Item, Input,
      Label, Grid, Col, Toast
  } from 'native-base';
  
  export default class AddBus extends Component {
      constructor(props) {
          super(props);
          this.state = {
              basic: true,
              passengerListView: [],
              info: "",
              viewSection: false
          };
      }
  
      renderBottomComponent() {
          if (this.state.viewSection) {
  
              for (count = 0; count &lt;= 5; count++) {
  
                  return (
                      &lt;Content&gt;
                          &lt;Grid&gt;
                              &lt;Col style={{ flex: 1 }}&gt;
                                  &lt;Item floatingLabel&gt;
                                      &lt;Icon name="ios-person" /&gt;
                                      &lt;Label&gt;Passenger&lt;/Label&gt;
                                      &lt;Input /&gt;
                                  &lt;/Item&gt;
                              &lt;/Col&gt;
                              &lt;Col style={{ flex: 0 }}&gt;
                                  &lt;Button transparent &gt;
                                      &lt;Icon name="close" /&gt;
                                  &lt;/Button&gt;
                              &lt;/Col&gt;
                          &lt;/Grid&gt;
  
                          &lt;Item floatingLabel&gt;
                              &lt;Label&gt;Seat&lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
  
                          &lt;Item floatingLabel last&gt;
                              &lt;Label&gt;Confirmation number &lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
                      &lt;/Content&gt;
                  )
  
              }
  
          }
      }
  
      render() {
          const { passengerListView } = this.state;
  
          return (
              &lt;Container&gt;
                  &lt;Header&gt;
                      &lt;Left&gt;
                          &lt;Button transparent onPress={() =&gt; this.props.navigation.goBack()}&gt;
                              &lt;Icon name="arrow-back" /&gt;
                          &lt;/Button&gt;
                      &lt;/Left&gt;
                      &lt;Body&gt;
                          &lt;Title&gt;Add bus&lt;/Title&gt;
                      &lt;/Body&gt;
                      &lt;Right&gt;
                          &lt;Button transparent onPress={() =&gt; this.props.navigation.goBack()}&gt;
                              &lt;Icon name="ios-folder" /&gt;
                          &lt;/Button&gt;
                      &lt;/Right&gt;
                  &lt;/Header&gt;
                  &lt;Content&gt;
                      &lt;Form&gt;
                          &lt;Item floatingLabel&gt;
                              &lt;Label&gt;Where from?&lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
                          &lt;Item floatingLabel &gt;
                              &lt;Label&gt;Where to?&lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
                          &lt;Item floatingLabel&gt;
                              &lt;Icon name="calendar" /&gt;
                              &lt;Label&gt;Departure date&lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
                          &lt;Item floatingLabel&gt;
                              &lt;Icon name="ios-calendar" /&gt;
                              &lt;Label&gt;Arrival date&lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
                          &lt;Grid&gt;
                              &lt;Col style={{ flex: 1 }}&gt;
                                  &lt;Item floatingLabel&gt;
                                      &lt;Icon name="ios-person" /&gt;
                                      &lt;Label&gt;Passenger&lt;/Label&gt;
                                      &lt;Input /&gt;
                                  &lt;/Item&gt;
                              &lt;/Col&gt;
                              &lt;Col style={{ flex: 0 }}&gt;
                                  &lt;Button transparent onPress={() =&gt; this.setState({ viewSection: true })} &gt;
                                      &lt;Icon name="add" /&gt;
                                  &lt;/Button&gt;
                              &lt;/Col&gt;
                          &lt;/Grid&gt;
  
                          &lt;Item floatingLabel&gt;
                              &lt;Label&gt;Seat&lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
  
                          &lt;Item floatingLabel last&gt;
                              &lt;Label&gt;Confirmation number &lt;/Label&gt;
                              &lt;Input /&gt;
                          &lt;/Item&gt;
  
                          {this.renderBottomComponent()}
  
                      &lt;/Form&gt;
  
                  &lt;/Content&gt;
  
              &lt;/Container&gt;
          );
      }
  }
  </code></pre>
  
  <p>Any help or suggestion is highly appreciated. Thank you.</p>