title: How to create a button next to other based on the number of elements on an array
body: <p>I'm creating an app that I want to, everytime a add an item to my array, create a button right next to another. I have this code:</p>
  <pre><code> &lt;FormControl w=&quot;3/4&quot; maxW=&quot;300&quot;&gt;
                      &lt;FormControl.Label&gt;Add contact&lt;/FormControl.Label&gt;
                      &lt;TouchableOpacity onPress={() =&gt; {
                          setModalVisible(!modalVisible)
                      }}&gt;
  
                          &lt;Box style={{backgroundColor: &quot;#E6E7ED&quot;}}
                               width=&quot;40%&quot; height=&quot;100&quot; rounded=&quot;xl&quot; _text={{
                              fontSize: '15',
                              fontWeight: 'medium',
                              color: 'black',
                              textAlign: 'center',
  
                          }}&gt;
  
                              &lt;Icon style={{marginTop: 5}} size={30}
                                    name='add-circle-outline'/&gt;
                              Adicionar contato
                          &lt;/Box&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/FormControl&gt;
  
                  {contacts.map((prop, key) =&gt; {
                      return (
  
                          &lt;FormControl w=&quot;3/4&quot; maxW=&quot;700&quot; &gt;
                              &lt;FormControl.Label&gt;Add contact&lt;/FormControl.Label&gt;
                              &lt;TouchableOpacity onPress={() =&gt; {
                                  setModalVisible(!modalVisible)
                              }}&gt;
  
                                  &lt;Box style={{backgroundColor: &quot;#E6E7ED&quot;}}
                                       width=&quot;40%&quot; height=&quot;100&quot; rounded=&quot;xl&quot; _text={{
  
                                      fontSize: '15',
                                      fontWeight: 'medium',
                                      color: 'black',
                                      textAlign: 'center',
  
                                  }}&gt;
  
                                      &lt;Icon style={{marginTop: 5}} size={30}
                                            name='add-circle-outline'/&gt;
                                      Add contact
                                  &lt;/Box&gt;
                              &lt;/TouchableOpacity&gt;
                          &lt;/FormControl&gt;
                      );
                  })}
  </code></pre>
  <p>The first button is fixed, so it will always appear. What I want to do, is to whenever the array has something, it creates a form control right next to the other one existent.How this can be done? I'm using native-base components. I tried to use the mapping, but it does not work. I think it is because it creates the Control inside the other one.</p>