react-i18next break line on Translation

Question

I have a translation key, with a text where I need to have a new line <br/>.

As an example I have:

{
"key":"First line. <br/> Second line"
} 

When calling t("key"), I still see the <br/> on my text and it is a single line.

I tried following the examples on the documentation with the <Trans> component, but I still don't get how to make the text translate and not stay as static text.

My code is the following:

 <Trans i18nKey="multiline">
   This text <br/> has multiple lines.
 </Trans>

I have two languages files:

English: "multiline":"This text <br/> has multiple lines."

German: "multiline":"Dieser text <br/> hat meherere linien."

What I expect is the text changing, showing the language selected. The problem is I get the text only in english.

Answer 1

I implemented this function and defined my translations with a \n for line breaks

function MultilineTranslation({text}) {
  const items = text.split('\n')
  return (
    <>
    { items.map(item => <p>{item}</p>)}
    </>
  )
}