反应/预先设置OnClick渲染表以及详细信息

Question

我有一个表格，当您单击作为加号按钮的td标签时，该表格应显示有关该行的详细信息。像这样：

现在我正在像这样测试它：

props.info.map((l, i) => {
                    return (
                        <tr>
                            <td>{i + 1}</td>
                            <td>{l.UserId}</td>
                            <td onClick={props.onShowInfoDetails}> 
                             <MenuPlusButton /></td>
                            {props.showInfoDetails && (
                        <DetailsTable />
                        )
                        }
                        </tr>
                    )
                })

DetailsTable是我要呈现onClick的东西

export const DetailsTable = (props: Props) => {
return (
<tr>
    <td>Hello</td>
</tr>
)

}

这有两个问题。首先，DetailsTable呈现在其余内容的右侧，而不是如图所示。第二个问题是，当我单击它时，所有表行都显示问候，而不仅仅是我单击的行。这两个我似乎都无法弄清楚。我猜的第二个问题是因为它说如果props.showEntryDetails为true，它将呈现DetailsTable，而onClick则将其设置为true，但是我该如何使它仅对我单击的那一行是true？