react-native combining two arrays into one

Question

I am trying to let users select their interest (ie, food, sports) and then display it on users profile page.

I have two separate views. One is where users select their favorite food and in the next page user could select their favorite sports.

So for example, I want to show Interest: pizza, hotdog, basketball, surfing on screen.

The problem I am having is that I can't merge two arrays(food and sports).

class UserInterest extends Component {
    constructor(props){
       super(props)
       this._favoriteFood = this._favoriteFood.bind(this)
       this._favoriteSports = this._favoriteSports.bind(this)

     this.state = {
        food:[],
        sports:[],
        interest:[],   
     }
    } 

     _favoriteFood(foodState){
        const food = foodState
        this.setState({toggle1:food})
        console.log(food)
        console.log(this.state.food)
      }

     _favoriteSports(SportsState){
        const sports = SportsState
        this.setState({toggle2:sports})
        console.log(sports)
        console.log(this.state.sports)
      }

render(){
 const {toggleText1} =this.state
 const {toggleText2} =this.state

return (
<View>
      <FavoriteFood favoriteFood={this._favoriteFood}/>
</View>
       <View>
             <FavoriteSports favoriteSports={this._favoriteSports}/>
       </View>
       <View>
             <Text>{toggleText1}</Text>
       </View>
               <View>
                     <Text>{toggleText2}</Text>
               </Vie>
)
}

If I have two arrays food:[pizza, hotdog] and sports:[basketball, surfing] How could I merge these two arrays and put it in interest:[] array?

Also when I console.log(food) I get array data, but when I console.log(this.state.food) I get an empty array. Shouldn't these be the same? I am confused.

Any advise or comments would be really appreciated thanks in advance!

Answer 1

You see the empty array, because your function lost your context, when your call it from another component and this contains these components (FavoriteSports, FavoriteFood etc.). So you need to consolidate context of UserInterest component. You can use arrow function for it

  _favoriteSports = (SportsState) => {
    const sports = SportsState
    this.setState({toggle2:sports})
    console.log(sports)
    console.log(this.state.sports)
  }

For merge arrays you can use es6 spread operator

const interest = [...food, ...sports];

Answer 2

You can use array concat

function concatArray(){
  let food=this.state.food;
  let sports=this.state.sports;
  let interest=[];
  interest.concat(food);
  interest.concat(sports);
  this.setState({interest:interest});
}

For your second question,

You are passing parameters to the function and changing the state to toggle1 and toggle2. Change the parameters or predefine the state in the constructor.

I also want to clarify this will change the value of the state. But console.log(this.state.sports) will not log the updated value because the changes will be affected after one clock cycle and the console.log will occur before that.

_favoriteFood(foodState){
  const food = foodState
  this.setState({food :food})
  console.log(food)
  console.log(this.state.food)
}