0

I have parent with two props: entities and options. I would like to send for each entity the options as params. How can I achieve that? I tried with:

class FormsList extends React.Component{
    constructor(props){
        super(props);
    };  
    render(){
        var items = this.props.entities.map(function(entity){
            return(
                <Child data={entity} key={entity.Id} moredata={this.props.options}/>
            );
        });
        return(
            <MuiThemeProvider muiTheme={getMuiTheme()}>
                <List children={items}/>
            </MuiThemeProvider>
        );      
    };
};

I know that params are not accessible in entities.map function body, but how should I pass options to child?

Tony Hinkle
  • 4,706
  • 7
  • 23
  • 35
laik
  • 111
  • 13

1 Answers1

2

You need to bind your map function in order for it to have access to the right this.

var items = this.props.entities.map(function(entity){
    return (
        <Child data={entity} key={entity.Id} moredata={this.props.options}/>
    );
}.bind(this);

Alternatively, you can use arrow function syntax:

var items = this.props.entities.map(entity => {
    return (
        <Child data={entity} key={entity.Id} moredata={this.props.options}/>
    );
};
Gilad Artzi
  • 3,034
  • 1
  • 15
  • 23