Issue #314: Created separate component BirthDateA, with language retrieved from data.metadata.language

src/templates/Castform.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import PageContext from '../contexts/PageContext';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
@@ -13,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import { formatDate } from '../utils';
+import BirthDateA from './blocks/BirthDate/BirthDateA'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -28,8 +27,7 @@ const Blocks = {
   references: ReferencesA,
 };
 
-const Castform = ({ data, language }) => {
-  const { t } = useTranslation();
+const Castform = ({ data }) => {
   const layout = data.metadata.layout.castform;
 
   const Photo = () =>
@@ -54,23 +52,6 @@ const Castform = ({ data, language }) => {
     </div>
   );
 
-  const BirthDate = () => {
-    if (data.profile.birthDate) {
-      return (
-        <div className="text-xs">
-          <h6 className="capitalize font-semibold">
-            {t('builder.profile.birthDate')}
-          </h6>
-          <div>
-            <span>{formatDate({ date: data.profile.birthDate, language, includeDay: true })}</span>
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  }
-
   return (
     <PageContext.Provider value={{ data, heading: HeadingD }}>
       <div
@@ -97,7 +78,7 @@ const Castform = ({ data, language }) => {
               <div>
                 <HeadingD>{data.profile.heading}</HeadingD>
                 <div className="grid gap-4">
-                  <BirthDate />
+                  <BirthDateA />
                   <ContactC />
                 </div>
               </div>

src/templates/blocks/BirthDate/BirthDateA.js

@@ -0,0 +1,26 @@
+import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import PageContext from '../../../contexts/PageContext';
+import { formatDate } from '../../../utils';
+
+const BirthDateA = () => {
+  const { t } = useTranslation();
+  const { data } = useContext(PageContext);
+
+  if (data.profile.birthDate) {
+    return (
+      <div className="text-xs">
+        <h6 className="capitalize font-semibold">
+          {t('builder.profile.birthDate')}
+        </h6>
+        <div>
+          <span>{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default memo(BirthDateA);