fix: client-side age calculation, more glanular check for isMounted

Allows to render as much as possible on the server side.
While keeping the calculation of the age on the client side to avoid hydratation mismatch.
This commit is contained in:
theoludwig committed 2024-05-16 10:06:43 +02:00
1 parent bbb2e56512
commit b231381cb3
1 file changed
+11 -8
+11 -8
View File
@@ -30,14 +30,17 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
title={i18n.translate("home.about.pronouns")}
value={i18n.translate("home.about.pronouns-value")}
/>
{isMounted ? (
<ProfileItem
title={i18n.translate("home.about.birth-date")}
value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
"home.about.years-old",
)})`}
/>
) : null}
<ProfileItem
title={i18n.translate("home.about.birth-date")}
value={
isMounted
? `${BIRTH_DATE_STRING} (${age} ${i18n.translate(
"home.about.years-old",
)})`
: BIRTH_DATE_STRING
}
/>
<ProfileItem
title={i18n.translate("home.about.nationality")}
value="Alsace, France"