I am trying to learn react with NextJS and bought this template. Under src/pages/terms.tsx I find the following code that is super complicated.

What does the ? in content?.map do?

How is passing {t(title)} translated into "Purpose" when t(title) from terms yields back the string 'terms-one-title'. Is there somewhere useTranslation is pulling the translations from? I can't find it.

import { useTranslation } from 'next-i18next';

export default function TermsPage() {
  const { t } = useTranslation('terms');
  const { title, date, content } = termsAndServices;

  return (
    <>
      <section className="mx-auto w-full max-w-1920 bg-light py-8 px-4 lg:py-10 lg:px-8 xl:py-14 xl:px-16 2xl:px-20">
          <div className="md:w-9/12 md:pb-10 ltr:md:pl-8 rtl:md:pr-8">
            {content?.map((item) => (
              <Element
                key={item.title}
                name={makeTitleToDOMId(item.title)}
                className="mb-10"
              >
                <h2 className="mb-4 text-lg font-bold text-heading md:text-xl lg:text-2xl">
                  {t(item.title)}
                </h2>
                <div
                  className="leading-loose text-body-dark"
                  dangerouslySetInnerHTML={{ __html: t(item.description) }}
                />
              </Element>
            ))}
          </div>
      </section>
    </>
  );
}

terms.ts

export const termsAndServices = {
  title: 'terms-main-title',
  date: '01/01/2020',
  content: [
    {
      id: '1',
      title: 'terms-one-title',
      description: 'terms-one-description',
    },
    {
      id: '2',
      title: 'terms-two-title',
      description: 'terms-two-description',
    },
    {
      id: '3',
      title: 'terms-three-title',
      description: 'terms-three-description',
    },
    {
      id: '4',
      title: 'terms-four-title',
      description: 'terms-four-description',
    },
    {
      id: '5',
      title: 'terms-five-title',
      description: 'terms-five-description',
    },
    {
      id: '6',
      title: 'terms-six-title',
      description: 'terms-six-description',
    },
  ],
};

Element.d.ts

import * as React from 'react';

export interface ElementProps extends React.HTMLProps<HTMLDivElement> {
    name: string;
    id?: string | undefined;
}

export default class Element extends React.Component<ElementProps> {}

CodePudding user response：

1. content? - if the content exists. Since you are taking an array from a file, you can probably remove the '?'
2. You can check where your translations are in a file named i18n.ts (or something like that) at the root of your project. Casual in the public/locales folder