Formatting code with tag in React and JSX

Question

I am trying to use the pre tag inside of JSX.When you use the pre tag in JSX, it doesn\'t format at all. Why? In order to use the pre tag I need to do something like this:

Answer 1

A good way to format in jsx is to use String.raw with a template literal and then the pre tag in your jsx. This helps eliminate any escape issues if you're doing something like this.

I did this for a starwars api project in React. This was my header.

    const Header = () => {

        var title = String.raw`
             ___| |_  ___  _____ __      _  ___  _____ ___
            / __| __|/ _  |  __/ \ \ /\ / // _  |  __// __|
            \__ | |_  (_| | |     \ V  V /  (_| | |   \__ |
            |___/\__|\__,_|_|      \_/\_/  \__,_|_|   |___/
        `;
        return (
            

                
 {title} 
            
        )
    };

    export default Header;