CODEWITHSUNDEEP
reactjs
Burak ULU
Burak ULU

Reputation: 303

Pass multiple state values to child component in reactjs

I'm trying to send two state elements as props and I need to send list and menu as one var.

My getInitialState function is like;

getInitialState:function(){
    return{
      list:['Breakfast: 9.00', 'Lunch: 12.00', 'Dinner: 18.00'],
      menu:['Kahvaltılık Sebzeli Sucuk, Soslu Zeytin, PeynirBal', 'Tel şehriyeli Çorba, Patates Kızartması, Uzun Makarna, Renkli Salata (tarifimdeki)', 'Patatesli Sigara Böreği, Mercimek köftesi, Elmalı Kurabiye']
    }
  }

And var is;

var list = this.state.list;
list = list.map(function(item, index){
  return(
    <ListItem item={item} key={index} onClick={this.handleVisibility}/>
  );
}.bind(this));

I tried to do that as;

var list = this.state.list;
list = list.map(function(item, index){
  return(
    <ListItem item={item} menu={this.state.menu} key={index} onClick={this.handleVisibility}/>
  );
}.bind(this));

I also tried this but not working;

var menu = this.state.menu;
var list = this.state.list;
list = list.map(function(item, index, menu){
  return(
    <ListItem item={item} menu={menu} key={index} onClick={this.handleVisibility}/>
  );
}.bind(this));

But it returns undefined

Upvotes: 2

Views: 2116

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Write it like this:

<ListItem list = {this.state.list} menu={this.state.menu} onClick={this.handleVisibility}/>

Now in ListItem you can access them by this.props.list and this.props.menu.

Update:

var list = this.state.list;
list = list.map((item, index) => {
    return(
        <ListItem item={item} menu={this.state.menu} key={index} onClick={this.handleVisibility.bind(this)}/>
    );
});

Upvotes: 2

Related Questions