Hi,
I found an HTML nesting issue in @bettercone/ui that causes React hydration warnings when opening UserManagementTable dialogs.
Summary
UserManagementTable renders block elements (div and p) inside AlertDialogDescription.
AlertDialogDescription renders a <p> internally, so this creates invalid markup (<p> inside <p>, and <div> inside <p>).
Steps to reproduce
- Use
@bettercone/ui@0.5.2 in a React app.
- Render
<UserManagementTable />.
- Open the admin user list page.
- Click
Ban User (also reproducible with Unban User and Delete User dialogs).
Actual result
Console warnings appear when the dialog opens:
In HTML, <p> cannot be a descendant of <p>. This will cause a hydration error.
In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.
Expected result
No invalid HTML nesting and no hydration warnings.
Hi,
I found an HTML nesting issue in
@bettercone/uithat causes React hydration warnings when opening UserManagementTable dialogs.Summary
UserManagementTablerenders block elements (divandp) insideAlertDialogDescription.AlertDialogDescriptionrenders a<p>internally, so this creates invalid markup (<p>inside<p>, and<div>inside<p>).Steps to reproduce
@bettercone/ui@0.5.2in a React app.<UserManagementTable />.Ban User(also reproducible withUnban UserandDelete Userdialogs).Actual result
Console warnings appear when the dialog opens:
In HTML, <p> cannot be a descendant of <p>. This will cause a hydration error.In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.Expected result
No invalid HTML nesting and no hydration warnings.