Javascript 具有相同Id的不同按钮的多个弹出框

我有一个带有状态列的表，所以每当状态有一个错误值时，我都需要显示一个popover onClick of error，并在popover中使用close按钮将其关闭。问题是，当我单击第一行错误时，表中所有错误的所有弹出框都会出现，当我关闭其中一个时，所有弹出框都会关闭。但我需要的弹出窗口打开和关闭只有点击错误状态。我使用的是react框架。有人能帮我吗？ 这是我的密码

constructor(props) {
        super(props);
        this.state = { popoverShow: false };
}

getTarget = () => {
    return ReactDOM.findDOMNode(this.target);
};

handleToggle = () => {
    this.setState({ popoverShow: !this.state.popoverShow });
};

let installedDCToolTip = (
                    <Popover id="datacollector-error-message-popover"
                        className="netapp-help-inline__popover tw-mt-10px"
                    >
                        <PopoverDiv className="tw-leading-lg">
                            <span className="row tw-font-body tw-text-lg tw-inline-flex tw-justify-between" >Error
                            <button
                                    id="close-datacollector-error-popover"
                                    type="button"
                                    className="btn-icon-no-bg close"
                                    onClick={this.handleToggle}>
                                    <i className="oci-app oci-close"></i>
                                </button>
                            </span>
                            <hr className="tw-mb-sm" />
                            <div>{info.record.message}</div>
                            <a
                                id="datacollector-status-error-docs"
                                href={DATA_COLLECTOR_ERROR_HELP_DOC_URL}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                Need Help?
                        </a>
                        </PopoverDiv>
                    </Popover>
                );

构造函数（道具）{
超级（道具）；
this.state={popoverShow:false}；
}
getTarget=（）=>{
返回ReactDOM.findDOMNode（this.target）；
};
handleToggle=（）=>{
this.setState（{popoverShow:！this.state.popoverShow}）；
};
设installedDCToolTip=(
错误

覆盖层

return (info.value === COLLECTOR_STATUS.ERROR || info.value === COLLECTOR_STATUS.RETRYING) ? 
 <button
                            id="datacollector-error-detail-button"
                            ref={button => {
                                this.target = button;
                            }}
                            onClick={this.handleToggle}
                        >
                            <span className="tw-text-hyperlink">Error Detail</span>
                        </button>
                        <Overlay {...sharedPropsForOverlay} placement="bottom">
                            {installedDCToolTip}
                        </Overlay>
                    </div>
                    
                    : <span>{_.startCase(_.capitalize(info.value))}</span>;

 render() {
        const sharedPropsForOverlay = {
            container: this,
            target: this.getTarget,
            show: this.state.popoverShow


           };
/* render table */

    }

return（info.value==COLLECTOR_STATUS.ERROR | | | info.value===COLLECTOR_STATUS.RETRYING）？
{
this.target=按钮；
}}
onClick={this.handleToggle}
>
错误细节
{installedDCToolTip}
：{u.startCase（{u.capitalize（info.value））}；
render（）{
const SharedPropsOfferlay={
集装箱:这个,，
目标：this.getTarget，
显示：this.state.poposhow
};
/*渲染表*/
}

为每行维护一个自我状态。比如说

const YourRow = ()=>{
  
   const [popoverOpen, setPopOverOpen] = useState(false);
   const someActionThatChangeState = ()=>{
       setPopOverOpen(true);
   } 


   return <tr>

        ====================
        ====================
        <PopOver></PopOver>
        <SomeIconORButton reactEvent(onCick etc)={someActionThatChangeState} />
         </tr> //This is specific to your row you can change what ever you want
 }

constyourrow=（）=>{
const[PopoOverOpen，setPopoOverOpen]=useState（false）；
const someActionThatChangeState=（）=>{
setPopoOverOpen（真）；
} 
返回
====================
====================
//这是特定于您所在行的，您可以随时更改所需内容
}

能否请您发布整个组件，而不仅仅是其中的片段，因为现在我不知道哪个是哪个组件。其他功能也使用了表格组件，因此我无法真正修改每一行。使用popover或overlay本身有什么解决办法吗？或者我可以使用任何其他react或引导组件来实现此功能吗？