下拉，根据react中的id找到循环中的单个元素

Question

我是新的反应和有一个应用程序，显示一些数据。我使用映射函数多次构建一个组件。当在元素中单击按钮时，应该显示更多的数据，但只能显示在被单击的元素中。目前，当我单击一个元素中的按钮时，可以切换所有元素的附加数据的显示，并将被单击元素的唯一id存储在某个状态中。我很确定我需要过滤结果，我见过类似的例子，但我不能说我完全理解它们。任何提示或更多的初学者友好的教程是非常赞赏的。

import React, { useState, useEffect } from 'react';
import '../style/skeleton.css'
import '../style/style.css'
export default function Body( student ) {
const [active, setActive] = useState({
activeStudent: null,
});
const [display, setDisplay] = useState(true)
useEffect(() => {
if (display === false) {
setDisplay(true)
} else {
setDisplay(false)
}
}, [active])
const handleClick = (id) => setActive({ activeStudent: id});

return (
<div>
{student.student.map((data) => {
const id = data.id;
return (
<div key={data.id} className="row border">
<div className="two-thirds column">
<h3>{data.firstName} {data.lastName}</h3>
{ display ? 
<button onClick={() => handleClick(id)}>-</button> 
:
<button  onClick={() => handleClick(id)}>+</button> }
{ display ? <div>
<p>{data.addional} additonal data</p>
</div> : null }
</div>

</div>
)
})}
</div>
);
}

Answer 1

从

{ display ? <div><p>{data.addional} additonal data</p></div> : null }

:

{ active.activeStudent === id ? <div><p>{data.addional} additonal data</p></div> : null }