react-hooks - 如何使映射项中的按钮触发另一个映射数组，单击按钮时将 id 作为键它显示显示内容

Question

我有按钮映射和另一个映射的正文内容，当单击按钮时，我希望它使用 Id 作为链接显示特定内容。默认情况下，显示的项目将是 id: 1，其中 id 为 1 的按钮处于活动状态。我想如果单击下一个按钮它显示 id: 2 内容，如果单击另一个按钮 id: 3 内容，

import React, { usestate } from 'react'

        const NavScreen = (): JSX.Element => {
          const [ show, setShow ] = useState(1);
          const clickHandler = (show) => {
            setShow(show);
          };
             return (
            <div className="home-top">
                <div className="top-content">
                  {screenNav.map((item, i) => (
                    <div className="top-item" key={i}>
                      <button className="screen">
                        <div className="">{item.icons}</div>
                        {item.name}
                      </button>
                    </div>
                  ))}
                </div>
              </div>
              <div>
              {body.map((card) => (
              <div className="body-content" key={card.id}>
                  <div className="">
                    <div className="">{card.number}</div>
                  </div>
                  <div className="heading">
                    <h1>{card.title}</h1>
                  </div>
                  <div className="paragraph ">
                    <p>
                      {card.text}
                    </p>
                  </div>
                </div>
              ))}
              </div>
          )
        }

        const screenNav = [
          { name: 'Connect', icons: <ScreenConnect /> },
          { name: 'Reports', icons: <ScreenReport /> },
          { name: 'Notes', icons: <ScreenNotes /> },
        ]

        const body = [
          {
          id: 1,
          number: "1",
          title: "connect",
          text: "yes"
          },
          {
          id: 2,
          number: "2",
          title: "reports",
          text: "carry on",
          },
          {
          id: 3,
          number: "3",
          title: "connect",
          text: "connecting people"
          },
        ]
    
    
    
    
    
    

标签： react-hooksmappingbuttonclickreact-functional-component