title: React Native Dynamically created components not rendering on first click
body: <p>I'm trying to create a list by dynamically adding the list items to an array in the <code>state</code> and then using the <code>map</code> operator to iterate over them. However, the new list items are only rendered after the second click on the button that handles the <code>setState</code> method. Any pointers on resolving this?</p>
  
  <pre><code>...
  constructor(props) {
      super(props);
      this.state = {
          requirements:[], // Placeholder array in state
          currentRequirement
      }
  }
  ...
  </code></pre>
  
  <p>And in my <code>render</code> method I have this.   </p>
  
  <pre><code>{
      this.state.requirements.map((el,i) =&gt; (
          &lt;TouchableOpacity key={i}&gt;
           &lt;BulletItem text={el}/&gt;
          &lt;/TouchableOpacity&gt;
      ))
  }
  &lt;FormInput 
      onChangeText={(value) =&gt; { 
          this.setState({ currentRequirement: value})}
      } 
      placeholder="Enter a new requirement"
  /&gt;
  
  &lt;Button 
      title="Add Requirement" 
      onPress={() =&gt; {
               this.onAddRequirementComponent()
      }}
  /&gt;
  </code></pre>
  
  <p>The method for handling the <code>setState</code> is this.</p>
  
  <pre><code>onAddRequirementComponent() {
      this.setState(previousState =&gt; ({
          requirements: [...previousState.requirements, this.state.currentRequirement],
          currentRequirement:''
      }))
  }
  </code></pre>
  
  <h3>UPDATE : FULL COMPONENT</h3>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View, StyleSheet, ScrollView, Picker, TouchableOpacity } from 'react-native';
  import { BulletItem, TagCloud } from "../components/index";
  import { Actions } from "react-native-router-flux";
  import {
      Button,
      Header,
      FormInput,
      FormLabel,
  } from 'react-native-elements';
  export default class ListScreen extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              jobtype: '',
              level: '',
              requirements: [],
              benefits: [],
              currentRequirement: '',
              currentBenefit: ''
          }
      }
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;Header
                      backgroundColor='#fff'
                      borderBottomWidth={0}
                      leftComponent={{ icon: 'corner-up-left', color: '#333', type: 'feather', onPress: () =&gt; { Actions.pop() } }}
                      centerComponent={{ text: 'Create New Job', fontFamily: 'VarelaRound-Regular', style: { color: '#333', fontSize: 18 } }}
                      rightComponent={{ icon: 'options', color: '#333', type: 'simple-line-icon' }} /&gt;
                  &lt;ScrollView&gt;
                      &lt;FormLabel&gt;Job Title&lt;/FormLabel&gt;
                      &lt;FormInput placeholder="e.g. Full Stack Javascript Developer"/&gt;
                      &lt;FormLabel &gt;REQUIREMENTS&lt;/FormLabel&gt;
                      {
                          this.state.requirements.map((el, i) =&gt; (
                              &lt;TouchableOpacity key={i}&gt;&lt;BulletItem containerStyle={{ backgroundColor: '#EFF0F2', borderRadius: 4 }} style={{ backgroundColor: '#EFF0F2' }} text={el} /&gt;&lt;/TouchableOpacity&gt;
                          ))
                      }
                                  &lt;FormInput 
                      onChangeText={(value) =&gt; { 
                          this.setState({ currentRequirement: value})}
                      } 
                      placeholder="Enter a new requirement"
                  /&gt;
  
                  &lt;Button 
                      title="Add Requirement" 
                      onPress={() =&gt; {
                              this.onAddRequirementComponent()
                      }}
                  /&gt;
                      &lt;FormLabel style={{ fontFamily: 'VarelaRound-Regular', color: '#333' }} labelStyle={{ fontFamily: 'VarelaRound-Regular', color: '#333' }}&gt;BENEFITS&lt;/FormLabel&gt;
                      {
                          this.state.benefits.map((el, i) =&gt; (
                              &lt;TouchableOpacity key={i}&gt;&lt;BulletItem text={el} /&gt;&lt;/TouchableOpacity&gt;
                          ))
                      }
                      &lt;FormInput value={this.state.currentBenefit} onChangeText={(value) =&gt; { this.setState({ currentBenefit: value }) }} placeholder="3 years experience developing Javascript apps" /&gt;
                      &lt;Button title="Add" onPress={() =&gt; { this.onAddBenefitComponent() }}/&gt;
                      &lt;Picker selectedValue={this.state.jobtype}
                          style={{ height: 50, width: '100%', backgroundColor: '#EFF0F2' }}
                          onValueChange={(itemValue, itemIndex) =&gt; this.setState({ jobtype: itemValue })}&gt;
                          &lt;Picker.Item label="Full Time" value="fulltime" /&gt;
                          &lt;Picker.Item label="Part Time" value="parttime" /&gt;
                          &lt;Picker.Item label="Contract" value="contract" /&gt;
                          &lt;Picker.Item label="Remote" value="remote" /&gt;
                      &lt;/Picker&gt;
                      &lt;Picker selectedValue={this.state.level}
                          style={{ height: 50, width: '100%', backgroundColor: '#EFF0F2' }}
                          onValueChange={(itemValue, itemIndex) =&gt; this.setState({ level: itemValue })}&gt;
                          &lt;Picker.Item label="Junior" value="junior" /&gt;
                          &lt;Picker.Item label="Mid-Level" value="mid" /&gt;
                          &lt;Picker.Item label="Management" value="management" /&gt;
                          &lt;Picker.Item label="Senior" value="senior" /&gt;
                      &lt;/Picker&gt;
                  &lt;/ScrollView&gt;
              &lt;/View&gt;
          );
      }
  
      onAddRequirementComponent() {
          if (this.state.currentRequirement)
              this.setState(previousState =&gt; ({
                  requirements: [...previousState.requirements, this.state.currentRequirement],
                  currentRequirement: ''
              }))
      }
  
      onAddBenefitComponent() {
          this.setState(previousState =&gt; ({
              benefits: [...previousState.benefits, this.state.currentBenefit],
              currentBenefit: ''
          }))
  
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#fff',
      }
  });
  </code></pre>