Reactのコードでわからないところ

Question

reactでこのようなコードあがったのですが、=>({})の部分はどのように処理されますか?

const Props= d => ({
  onClick(id) {
    d(todo(id));
  }
});

Answer 1

こんにちは

const Props は関数です。どのような関数かというと、

• １個の引数 d を取ります。 そのd もまた関数であることが想定されています。
• オブジェクトを返します。そのオブジェクトには、onClickというプロパティがあり、onClickプロパティの値もまた関数です。
• onClickは、id という引数１個を取る関数で、 あらかじめ与えられた関数todo と、 Props に与えられた引数である関数 d とを使って、 d(todo(id)) を返します。

以下は、上記を確認するためのサンプルです。

• 動作確認用Codepen: https://codepen.io/jun68ykt/pen/QWWRyvP?editors=0012