动态反应挂钩触发按钮

Question

我有一个反应应用程序，该应用程序从服务器获取数据，我想为每个数据添加一个状态。让我们看看我的设计应用程序：

NB：红线是我请求的每个数据（白线是data属性）。

因此，每个数据都应该能够被单击并具有自己的状态以显示proposal和laporan akhir属性。我正在使用React钩子，那应该怎么做？

到目前为止，这是我的代码：

function RekapAngkatan({
  auth,
  getProposalRecapByYear,
  getReportRecapByYear,
  posts,
  StickyNav
}) {
  const postingan = posts.posts
  const blankPanduan = {id: "", value: false};  
  const [panduan, setPanduan] = React.useState([{...blankPanduan.value}])
  let content;

  React.useEffect(() => {
    if (auth.isAuthenticated) {
      // Server request
      const getProposals = async () => await getProposalRecapByYear()
      const getReports = async () => await getReportRecapByYear()

      getProposals()
      getReports()
    }
  }, [auth])

if (loading) {
  content = <Loading />
} else {
  // trying to dynamically setState
  setPanduan([
      ...panduan,
      {
        id: postingan.data.length,
        value: false
      }
    ])


  content = postingan.data.map((post, i) => {
    <Section bg="transparent" margin="0 1.5em" padding="0 2em" key={i}>
          <div className="info-color">
            {post.value}
            <FakeButton
              bg="#8C489F"
              type="button"
              onClick={() => setPanduan([...panduan, {...!blankPanduan}])}
            >
              Caret Down
            </FakeButton>

           {/* showing attributes*/}
           <Attribute show={panduan.value}>
             {post.amount}
           </Attribute>
          </div>
    </Section>

   })
  }
  return content
}