子どもの要素へのアクセス行動

Question

私はエラーを受け取りますCannot read property 'handleDeleteAll' of undefined。 これは私のコードです：

const RecipeList = (props) => { 

const Items = props.recipes.map((recipe) => { 
    return <RecipeListItem key={recipe.id} recipe={recipe} /> 
}); 
     console.log(props); 
     return (
     <div> 
      <button onClick={this.props.handleDeleteAll}>Remove All</button> 
      <div> 
      {Items} 
      </div> 
     </div> 
    ) 
} 
export default RecipeList; 

そして、これはレポです：https://github.com/kstulgys/fcc-recipe-box/blob/master/src/components/RecipeList.js

Answer 1

RecipeListは機能しませクラスです。ハンドラはprops.handleDeleteAllで、this.props.handleDeleteAllではなくアクセスできます。

Answer 2

RecipeListはステートレス機能コンポーネントなので、this.propsは未定義です。

変更このライン

<button onClick={props.handleDeleteAll}>Remove All</button>