How to Display Line Breaks from Saved Text Area in a React Component?

Sometimes, we want to display line breaks from saved text area in a React component.

In this article, we’ll look at how to display line breaks from saved text area in a React component.

Display Line Breaks from Saved Text Area in a React Component

To display line breaks from saved text area in a React component, we can set the white-space CSS property to pre-line.

For instance, we write:

import React from "react";

const value = `Lorem ipsum dolor sit amet\n consectetur adipiscing elit.`;

export default function App() {
  return (
    <>
      <style>
        {`#p-wrap {
          white-space: pre-line;
        }`}
      </style>
      <textarea value={value}></textarea>
      <p id="p-wrap">{value}</p>
    </>
  );
}

We have the p-wrap class that has the white-space CSS property set to pre-line.

Then we apply that class to the p element.

And now we should see the text broken into 2 lines according to the line breaks.

Conclusion

To display line breaks from saved text area in a React component, we can set the white-space CSS property to pre-line.