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