p tag is removing new line character in string-CodePudding

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

const myString = `hello\nstring`

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 = "hi\nString";
  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

CodePudding user response：

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;
}

CodePudding user response：

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 = `hi\nString`;
 return (
    <div className="App">
<p><NewlineText text={testString} /></p>
    </div>
  );
}

This site might clear your any remaining doubts.

CodePudding user response：

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>
  );
}