Refactor email verification UI to enhance data display
Replaced table with div and paragraph elements to improve readability of user-submitted data. Added logic to handle multiline form data and remove empty lines, ensuring cleaner and more user-friendly presentation.
This commit is contained in:
parent
ceaca60ece
commit
821e63953b
|
|
@ -26,19 +26,21 @@ const ThankYou: FC = () => {
|
|||
</Helmet>
|
||||
<header className="header">Thank you for completing the form and verifying your email!<br></br>This is the data you entered:</header>
|
||||
<div className="fields">
|
||||
<table>
|
||||
<tbody>
|
||||
{Object.entries(formData).map(([key, value]) => (
|
||||
<tr className="form-data-row" id={key}>
|
||||
<td className="form-data-key">{key}</td>
|
||||
<td className="form-data-value">{value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{Object.entries(formData).map(([key, value]) => (
|
||||
<div>
|
||||
<p><strong>{key}</strong></p>
|
||||
{
|
||||
value
|
||||
.split("\n")
|
||||
.filter(str => str.trim() !== "")
|
||||
.map((str, index) => <p style={{ wordWrap: 'break-word' }}>{str}</p>)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
)
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user