有条件地将按钮与另一个组件包装在一起

Question

I'm having trouble getting the syntax right to conditionally wrap my OverLay

    <td>
      {uuid === resetEmailValidationUser && popoverTop &&
        <OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
      }

        <Button
          bsSize='xsmall'
          className='reset-password-link background-color-dark-grey'
          onClick={() => handleResetPassword(uuid, email)}
        >
          reset password
        </Button>

    { uuid === resetEmailValidationUser && </OverlayTrigger>}
    </td>

Answer 1

This is not a valid JSX , it will throw error. You can write it like this by using ternary operator :

canst button =  <Button
                  bsSize='xsmall'
                  className='reset-password-link background-color-dark-grey'
                  onClick={() => handleResetPassword(uuid, email)}
                >
                  reset password
                </Button>

<td>
    {uuid === resetEmailValidationUser && popoverTop?
        <OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
          {button}
        </OverlayTrigger>
    :
    {button}
</td>