ReactのFunction Componentの`js-no-bind`エラーを修復

このコードにはESLintのreact/js-no-bindに違反してます

Cart.js

function Cart() {
	function cartItemRemoveHandler(id) {
		console.log(id)
	}
	
	return <CartItem
		onRemove={cartItemRemoveHandler.bind(null, item.id)}
		// ここにエラー
        />;
}

CartItem.js

function CartItem(props) {
	return <button onClick={props.onRemove}>Remove</button>
}

なぜこう書くのか？の理由は二つあります

• JSXのonRemove={}には、直接にFunctionをInvokeすることができません、よって、引数（item.id）をパスすることもできません
• bindを利用して、新しいFunctionを作ります、しかも直接にInvokeはなし、引数をパスすることが可能になります

修正する方法は以下となります

まずはCart.jsのbind()部分を削除します

Cart.js

return <CartItem
-		onRemove={cartItemRemoveHandler.bind(null, item.id)}
+		onRemove={cartItemRemoveHandler}
	/>;

次はCartItem.jsに、もう一つのfunctionを書きます

CartItem.js

function CartItem(props) {
+	function onRemoveHandler() {
+		props.onRemove(props.id);
+	}

-	return <button onClick={props.onRemove}>Remove</button>
+	return <button onClick={props.onRemoveHandler}>Remove</button>
}

これで完了しました