获取数据并显示在弹出组件上答案

【问题标题】：fetch data and display on popup component获取数据并显示在弹出组件上
【发布时间】：2021-09-11 04:41:31
【问题描述】：

我有一个对象文件数组并在前端显示数据&我在我正在获取的数据上应用了 onClick 函数，但问题是当单击该按钮时我得到最后一个对象值数组但我想要那具体的数据，数据文件 -

 const Data = [
  {
    id: 1,
    HEXCode: "#FF6263",
    RGBACode: "rgba(255, 98, 99, 1)",
  },
  ........
 ]

我的代码 -

const HashCode = () => {
  const [redvalue, setRedValue] = useState(Data);
  const [ButtonPopup, setButtonPopup] = useState(false);
  return (
    <Wrap>
      <Home
        code={"Hash Code"}
        link={"/"}
        link2={"/RGBCode"}
        link3={"/Gradients"}
        link4={"/TwoColorCombination"}
      />
      <Content>
        {redvalue.map((element, index) => {
          return (
            <div key={index}>
              <Button
                type="button"
                style={{ background: `${element.HEXCode}` }}
                onClick={() => setButtonPopup(true)}
              >
                {element.HEXCode}
              </Button>
              <Popup trigger={ButtonPopup} setTrigger={setButtonPopup}>
                <CopyToClipboard text={element.HEXCode}>
                  <button type="btn">{element.HEXCode}</button>
                </CopyToClipboard>
                <CopyToClipboard text={element.RGBACode}>
                  <button type="btn">{element.RGBACode}</button>
                </CopyToClipboard>
              </Popup>
            </div>
          );
        })}
      </Content>
    </Wrap>
  );
};

export default HashCode;

弹出代码-

const Popup = (props) => {
  return props.trigger ? (
    <Wrap className="popup">
      <div className="popup_inner">
        <button className="close_btn" onClick={() => props.setTrigger(false)}>
          close
        </button>
        {props.children}
      </div>
    </Wrap>
  ) : (
    ""
  );
};

export default Popup;

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

您应该使用ButtonPopup 状态中的索引而不是boolean 来检查弹出窗口的条件渲染。

<Button
    type="button"
    style={{ background: `${element.HEXCode}` }}
    onClick={() => setButtonPopup(index)}
>
    {element.HEXCode}
</Button>

<Popup trigger={ButtonPopup === index} setTrigger={setButtonPopup}>

【讨论】：