Edge Case: What to do when you need to push data to front-end with formatting unaffected. The Pre tag

When I was working on a personal project I ran into an edge case that required me to output my information on the front-end the same way it was coming in on the backend.

There were no good resources to display information as such, but after some digging I discovered the (pre) tag.

In React, the (pre) tag is used to render preformatted text, preserving any whitespace and line breaks within it. To use it, simply create a component or element in your JSX code and wrap the desired preformatted text with the (pre) tags. For example:

function PreformattedText() {
  return (
    <pre>
      This is an example of preformatted text.
      It will preserve all whitespace and line breaks.
      Useful for displaying code snippets or structured data.
    </pre>
  );
}

When the component is rendered, the text inside the (pre) tags will be displayed exactly as it is written in the code, maintaining indentation and formatting. This is particularly helpful when presenting code blocks or any content that requires precise visual representation.

Happy coding!