【React】【Material UI】コンポーネントに新たな属性を持たせる

現在ReactとMaterial UIをもちいて，
「キーワードを入力して検索すると，検索結果が表示され，それをクリックできる」
というような検索エンジンライクなものを作成しています．

そこで，それぞれの検索結果１件１件を
RaisedButtonをもちいて表示しているのですが，
そのRaisedButtonに属性を持たせる方法がわかりません．

具体的には，
上から２件目のRaisedButtonをクリックすると
Reactの方で「それが２件目である」と判定したいです．

key属性のようなものを持たせて判定したいと思っているのですが，
知識不足でうまくできません．

どうぞよろしくお願い致します．

---- 追記 -----

以下のように, ajaxで得た検索結果が入っている exp.pages に含まれる検索結果それぞれを
RaisedButtonとして表示しようとしており,
表示したそれぞれをタップした時に，clickRequestのハンドラーの中で
どの検索結果がタップされたかを識別したいです．

 for (let page of exp.pages) {
    let pagejsx = (
      <div >
        <RaisedButton onTouchTap={clickRequest} children={page.Title}>
        </RaisedButton>
      </div>
    );
}

退会済みユーザー

2017/07/19 11:12

コードを載せて頂けると回答しやすいです

行動規範の内容に同意します

回答1件

ベストアンサー

イベント発火時にどのデータが叩かれたを知りたいのであれば、keyを持たせるというよりかは、onTouchTapイベントに引数としてArray内部のデータを渡すのが一番簡単な方法だと思います。

javascript
1//該当のArray
2   const exppages = [
3     {pageTitle:"test1",num:1},
4     {pageTitle:"test2",num:2},
5     {pageTitle:"test3",num:3},{pageTitle:"test4",num:4},
6     {pageTitle:"test5",num:5},{pageTitle:"test6",num:6},{pageTitle:"test7",num:7}];
7  
8  //Array処理
9    const listElement = exppages.map((value,index,array) =>  {
10      return (
11        <RaisedButton onTouchTap={()  => this.clickRequest(value)} children={value.pageTitle} />
12      )
13    });
14