How to format a text inside a variable in React using \n or <br/> or similar

I need to format a text inside a variable using React. I need to use \n or
but it's not working, Also I need to bold the tittles. For example:

const termsAndConditions = "Terms and Conditions Welcome to Website Name!

These terms and conditions outline the rules and regulations for the use of Company Name's Website, located at Website.com.

By accessing this website we assume you accept these terms and conditions. Do not continue to use Website Name if you do not agree to take all of the terms and conditions stated on this page.

The following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: “Client”, “You” and “Your” refers to you, the person log on this website and compliant to the Company's terms and conditions. “The Company”, “Ourselves”, “We”, “Our” and “Us”, refers to our Company. “Party”, “Parties”, or “Us”, refers to both the Client.

Cookies

We employ the use of cookies. By accessing Website Name, you agreed to use cookies in agreement ";

Solution 1:

I recommend you to use template literals

Template Literals

Example without template

    console.log('string text line 1\n' +
'string text line 2');
// Output be
// "string text line 1
// string text line 2"

Example with template

console.log(`string text line 1
string text line 2`);
// Output be
// "string text line 1
// string text line 2"

Solution 2:

If you happen to use JSX you can actually format your content using HTML.

Using Functional Component:

function TermsAndConditions() {
   return (
      <div>
         <p><strong>Paragraph in bold</stron></p>
         <p>Normal paragraph</p>
      </div>
   );
}

function Footer() {
   return <TermsAndConditions/>
};

ReactDOM.render(
   <Footer/>,
   document.getElementById('footer')
);

Or using Class Component:

function TermsAndConditions() {
   return (
      <div>
         <p><strong>Paragraph in bold</stron></p>
         <p>Normal paragraph</p>
      </div>
   );
}

class Footer extends React.Component {
   render() {
      return (
         {this.props.message}
      )
   }
}

ReactDOM.render(
   <Footer message={<TermsAndConditions/>}/>,
   document.getElementById('footer')
);