How to replace \n new line character in string so that <p> tag can show new line

Question

In a react application I am working on there is a condition that:

when a string has a new line character the

<p>{string}</p> tag in which string is to be displayed should be replaced with HTML new line character.

But of course this does not work.

Things I have already tried but did not work for me:

const string = Hello\\nHii

1. <p>{string.replace('\\n', <br />)}</p>

output:

Hello<br />Hii

2. <p>{string.replace('\\n', &amp;)}</p>

output:

Hello Hii

I found the above suggestions in the following answers:

the val of a textarea doesnt take new lines into account

Answer 1

There are two options.

1. Using pre tag or css property white-space: pre :

   <p><pre>{string}</pre></p>

2. Using dangerouslySetInnerHTML :

   <p dangerouslySetInnerHTML={{__html: string.replace('\\n', '<br />')}}></p>