Support arrays for dynamic rendering and component reuse

[fabifrank]

Is your feature request related to a problem? Please describe.
Given a component Section that is rendering 2 paragraphs:

const Section = () => (
  <>
    <h2>{t("title")}<h2>
    {t("p1") !== "" && <p>{t("p1")}</p>}
    {t("p2") !== "" && <p>{t("p2")}</p>}
  </>
)

that could be used on multiple pages and layouts, one must check for endless paragraphs if they exist in the locale and render them. So if "contact" page has 2 paragraphs, this is fine. But what if "imprint" had 3 or more?

Describe the solution you'd like

"title": "imprint",
"paragraphs": [
  "p1...",
  "p2...",
  "p3..."
]

and in the component:

const Section = () => (
  <>
    <h2>{t("title")}<h2>
    {t("paragraphs").map(text => (
      <p>{text}</p>
    ))}
  </>
)

Describe alternatives you've considered
The only alternative I see now is the one in the problem description.

Additional context
The code snippets above show all relevant parts.

[amannn]

Hi @fabifrank and thank you for your question.

In your case I'd suggest to use rich text formatting to get a flexible amount of tags that can be defined in the messages. By doing that you can also potentially use other tags in your content.

Does that help?

[amannn]

Closing due to inactivity … Feel free to reopen this with additional details if there are still open questions!

[fabifrank]

Thanks @amannn for your answer. I was out of that project for some days, sorry for the delay.
I tried your method with rich text, but it states t.rich is not a function. Currently using const t = useTranslations(namespace).

Is there something I am missing?

[amannn]

Are you maybe on an old version? t.rich was added in 2.0.0.