React-i18next: break lines in JSON String

[holzfelix]

I'm struggling to break lines within the string in my JSON language file.

This is what I already tried, which doesn't break a new line:

line: "This is a line. \n This is another line. \n Yet another line",

line: ("This is a line."+ <br/> + "This is another line. \n Yet another line"),

line: ('This is a line. <br/> This is another line. \n Yet another line'),

I obviously try to make a new line after each sentence. This is how I call it:

<TooltipLink onClick={() => {
    this.toggleHelpTextDialog(t('test:test.line'));
}}/>

Any ideas? Thanks!

[jamuhl]

You can't do that in react - not without doing some dangerously insert html: https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

but what you can do:

...
render() {
  return (
    <div>
       {
         t('test:test.line').split('/n').map(line => <p>{line}</p>)
       }
    </div>
  )
}
...

[jamuhl]

alternative to above solution -> use markdown

https://github.com/acdlite/react-remarkable

[jamuhl]

closing this for now...hope one of the provided options helped to solve the problem

[aidanatee]

https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746 article on break line in react

[Cedric-Delacombaz]

Adding white-space: pre-line via CSS did the trick for me :)