title: react native how to merge two arrays with a function
body: <p>I have two functions and when I press each of them I create an array. </p>
  
  <pre><code>    this.state = {
              food:[],
              sports:[],
              interest:[],   
          } 
  
           _favoriteFood(foodState){
              const food = foodState
              this.setState({food:food})
              console.log(food)
              console.log(this.state.food)
            }
  
           _favoriteSports(SportsState){
              const sports = SportsState
              this.setState({sports:sports})
              console.log(sports)
              console.log(this.state.sports)
            }
  render(){
  
  
  return (
  &lt;View&gt;
        &lt;FavoriteFood favoriteFood={this._favoriteFood}/&gt;
  &lt;/View&gt;
         &lt;View&gt;
               &lt;FavoriteSports favoriteSports={this._favoriteSports}/&gt;
         &lt;/View&gt;
  )}
  </code></pre>
  
  <p>So for example, I am getting arrays like <code>food:[pizza, hodog]</code> and <code>sports:[basketball, surfing]</code> when I call a method by pressing a button.</p>
  
  <p>My question is when I try to merge two arrays like:</p>
  
  <pre><code>const interest = [...this.state.food, ...this.state.sports]
  </code></pre>
  
  <p>Its showing <code>undefined</code> because I think I am calling it before the render happens. </p>
  
  <p>Should I make another method to merge arrays? 
  Any advice or comments would be really helpful. Thanks in advance :)</p>