从鼠标单击的对象数组中获取id值

Question

我有一个对象数组，它将在鼠标单击时展开并显示一个分数数组列表。

我的问题:是否有办法从onClick事件中获得单个id值?

例如，在下面的数组中，当我点击按钮时，我想获得id:1而不是id: [1,2,3]，当我点击Sarah时。

我尝试过valueOf(),filter(),find()，它们都需要比较我正在寻找的值与我需要的值，即students.filter((r)=> r.id === '1')，我需要做students.filter((r)=> r.id)，但我得到id:[1,2,3]的结果。

这里是我的代码沙箱的链接(你会注意到我的尝试被注释掉了)。在api中，所有的等级同时展开，我一次只需要一个。我理解这是因为这是一个迭代的数组，但我不知道是否有可能在单击事件上获得其自身的id。

{
"students":
[
{"firstName":"Sarah",
"grades":["78","100","87"],
"id":"1"},
{"firstName":"Bob",
"grades":["75","89","82"],
"id":"2"},
{"firstName":"Laura",
"grades":["88","82","81"],
"id":"3"}
] 
}

Answer 1

答案是通过将事件作为prop传递给expandDiv()函数来查找当前id。我仍然不能成功地将id与切换状态的按钮匹配。

const expandDiv = (e) => {
setActive(!isActive)
console.log(e.currentTarget.id)
}