ReactJSマップを使用して作成された子に子関数を渡す

Question

親関数を子コンポーネントに渡す必要がありますが、マップ関数でコンポーネントが作成されているため動作していないようです。問題のコードは次のとおりです。

{this.state.recipes.map(function(a,index){ 
    return (<Recipe name={a.name} ingredients={a.ingredients} index={index} onClick={this.handleDelete}/>); 
} 

これを回避するにはどうすればよいでしょうか？

Answer 1

マップ機能でコンポーネントを作成しているかどうかは関係ありません。私はあなたの機能を束縛するのを忘れたと思う。

あなたのコードは次のようにあなたがまた、矢印の機能を使用することができ、この

{this.state.recipes.map(function(a,index){ 
    return (<Recipe name={a.name} ingredients={a.ingredients} index={index} onClick={this.handleDelete.bind(this}/>); 
} 

のようにする必要があります：

{this.state.recipes.map((a,index) => <Recipe name={a.name} ingredients={a.ingredients} index={index} onClick={this.handleDelete.bind(this}/>)} 

ここではjsfiddleです。