配列内オブジェクトをMAPしたものを表示して、クリックした要素のインデックスを取得したい。

Question

Reactで、以下のように配列内オブジェクトをMAPしてdiv要素を表示させたのですが、その中の一つのdiv要素をクリックしたときにindexを取得できるようにしたいのですが、どのようにすればいいのでしょうか？

people = [
  {
    name: 'a',
    age: 1,
    hobby: 'yeah',
  },
  {
    name: 'b',
    age: 2,
    hobby: 'Teah',
  },
  {
    name: 'c',
    age: 3,
    hobby: 'deah',
  },
]

return people.map(person => {
<div key={person.toString()}>
<h3>{persop.name}</h3>
  <p>{person.age}</p>
  <p>{person.hobby}</p>
</div>
})

Answer 1

map関数に使われるアロー関数2個目の引数がindexなのでそこから取れますよ

array.map((person,index)=>/*コード*/)

そのあとdivにonClick属性を付けばクリックででます
例

onClick={()=>console.log(index)}

Comments

[607842]

ありがとうございます！助かりました！以下のように実装いたしました。
```
<div key={person.toString()}>
<button type='button' onClick={()=>console.log(index)}>
<h3>{person.name}</h3>
<p>{person.age}</p>
<p>{person.hobby}</p>
</div>
</button>
```