Sometimes, we want to display line breaks from saved text area with React.
In this article, we’ll look at how to display line breaks from saved text area with React.
How to display line breaks from saved text area with React?
To display line breaks from saved text area with React, we set the white-space CSS style to pre-line.
For instance, we write
const Comp = () => {
//...
return (
<>
<style>{`
#p-wrap {
white-space: pre-line;
}
`}</style>
<textarea value={address} />
<p id="p-standard">{address}</p>
<hr />
<p id="p-wrap">{address}</p>
</>
);
};
to add the textarea and p elements.
We set the element with ID p-wrap to have the white-space style set to pre-line.
Then this p element will display all the line breaks that are entered into the textarea.
Conclusion
To display line breaks from saved text area with React, we set the white-space CSS style to pre-line.
