I think this is because new lines and white spaces are collapsed in browser by default. You do not need any JavaScript for this, just add following line in your stylesheet –

p {
  white-space: pre-wrap;
}

You can use .split method whenever n is found inside your code to enter new line

  function NewlineText(props) {
  const text = props.text;
  const newText = text.split('n').map(str => <p>{str}</p>);
  
  return newText;
}

export default function App() {
  const testString = `hinString`;
 return (
    <div className="App">
<p><NewlineText text={testString} /></p>
    </div>
  );
}

This site might clear your any remaining doubts.

Did you use <br/> code to break the line.? Please check code as given below-

export default function App() {
  const testString = "hi<br/>String";
  return (
    <div className="App">
      <p>{testString}</p>
    </div>
  );
}

I have a string that contains a new line character. For example:

const myString = `hellonstring`

I am then trying to dispaly this string in a functional component, which is wrapped around a p tag. For example:

export default function App() {
  const testString = "hinString";
  return (
    <div className="App">
      <p>{testString}</p>
    </div>
  );
}

For some reason, the p tag simply displays “hello string” on one line when I’d like for it to be displayed across two lines. Is there a way that I can stop the p tag from removing the new-line character from within the string?

The following Code Sandbox contains the executable example: https://codesandbox.io/s/unruffled-allen-ehrsd8?file=/src/App.js