Как вывести несколько тегов из массива?

Question

Необходимо вывести несколько одинаковых по смыслу тегов с содержимым из массива:

const meta = {
  originTrials: ['first', 'second'],
};

В JSX реализовал это так:

{meta.originTrials.flatMap((originTrial, index) => (
   <meta key={index} httpEquiv="origin-trial" content={originTrial} />
))}

По итогу выведен лишь один мета с последним элементов массива.

<meta http-equiv="origin-trial" content="second">

Так же пробовал вынести код приведенный выше в отдельный компонент, который обернул фрагментом (<> ... </>) и при обновлении страницы все теги вывелись, но после полной её загрузки вообще исчезли. Что я делаю не так?

Весь код примерно выглядит так:

import Head from 'next/head';

type Props = {
  pageTitle: string;
};

const meta = {
  originTrials: ['first', 'second'],
};

const Meta: React.FC<Props> = ({ pageTitle }: Props) => {
  return (
    <Head>
      {/* ... */}

      <title>{pageTitle}</title>

      {meta.originTrials.map((originTrial, index) => (
        <meta
          key={index}
          httpEquiv="origin-trial"
          content={originTrial}
        />
      ))}

      {/* ... */}
    </Head>
  );
};

export default Meta;

БЛОГ НА HUSL

Как вывести несколько тегов из массива?

Ответы (0 шт):