fix(client): rendering the block title as an array (#49924)

client/src/templates/Introduction/components/__snapshots__/block-intros.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BlockIntros /> matches snapshot 1`] = `
+<div
+  className="block-description"
+>
+  <p
+    dangerouslySetInnerHTML={
+      {
+        "__html": "first paragraph",
+      }
+    }
+  />
+  <p
+    dangerouslySetInnerHTML={
+      {
+        "__html": "second paragraph",
+      }
+    }
+  />
+</div>
+`;

client/src/templates/Introduction/components/block-intros.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { BlockIntros } from './block';
+
+const arrString = ['first paragraph', 'second paragraph'];
+
+describe('<BlockIntros />', () => {
+  it('matches snapshot', () => {
+    const tree = renderer.create(<BlockIntros intros={arrString} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

client/src/templates/Introduction/components/block.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import type { TFunction } from 'i18next';
+import type { DefaultTFuncReturn, TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { ProgressBar } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
@@ -60,6 +60,17 @@ interface BlockProps {
   t: TFunction;
   toggleBlock: typeof toggleBlock;
 }
+
+export const BlockIntros = ({ intros }: { intros: string[] }): JSX.Element => {
+  return (
+    <div className='block-description'>
+      {intros.map((title, i) => (
+        <p dangerouslySetInnerHTML={{ __html: title }} key={i} />
+      ))}
+    </div>
+  );
+};
+
 class Block extends Component<BlockProps> {
   static displayName: string;
   constructor(props: BlockProps) {
@@ -82,16 +93,6 @@ class Block extends Component<BlockProps> {
     );
   }
 
-  renderBlockIntros(arr: string[]): JSX.Element {
-    return (
-      <div className='block-description'>
-        {arr.map((str, i) => (
-          <p dangerouslySetInnerHTML={{ __html: str }} key={i} />
-        ))}
-      </div>
-    );
-  }
-
   render(): JSX.Element {
     const {
       blockDashedName,
@@ -130,9 +131,12 @@ class Block extends Component<BlockProps> {
     });
 
     const blockTitle = t(`intro:${superBlock}.blocks.${blockDashedName}.title`);
-    const blockIntroArr = [
-      t(`intro:${superBlock}.blocks.${blockDashedName}.intro`)
-    ];
+    // the real type of TFunction is the type below, because intro can be an array of strings
+    // type RealTypeOFTFunction = TFunction & ((key: string) => string[]);
+    // But changing the type will require refactoring that isn't worth it for a wrong type.
+    const blockIntroArr = t<string, DefaultTFuncReturn & string[]>(
+      `intro:${superBlock}.blocks.${blockDashedName}.intro`
+    );
     const expandText = t('intro:misc-text.expand');
     const collapseText = t('intro:misc-text.collapse');
 
@@ -167,7 +171,7 @@ class Block extends Component<BlockProps> {
                 </div>
               )}
             </div>
-            {this.renderBlockIntros(blockIntroArr)}
+            <BlockIntros intros={blockIntroArr} />
             <button
               aria-expanded={isExpanded}
               className='map-title'
@@ -224,7 +228,7 @@ class Block extends Component<BlockProps> {
                 </div>
               )}
             </div>
-            {this.renderBlockIntros(blockIntroArr)}
+            <BlockIntros intros={blockIntroArr} />
             <Challenges
               challengesWithCompleted={challengesWithCompleted}
               isProjectBlock={isProjectBlock}
@@ -285,7 +289,7 @@ class Block extends Component<BlockProps> {
                 </Link>
               )}
             </div>
-            {isExpanded && this.renderBlockIntros(blockIntroArr)}
+            {isExpanded && <BlockIntros intros={blockIntroArr} />}
             {isExpanded && (
               <Challenges
                 challengesWithCompleted={challengesWithCompleted}
@@ -326,7 +330,7 @@ class Block extends Component<BlockProps> {
               {this.renderCheckMark(isBlockCompleted)}
               <h3 className='block-grid-title'>{blockTitle}</h3>
             </div>
-            {this.renderBlockIntros(blockIntroArr)}
+            <BlockIntros intros={blockIntroArr} />
           </Link>
         </div>
       </ScrollableAnchor>