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 Wele to Website Name!

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

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 pliant 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 ";

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 Wele to Website Name!

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

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 pliant 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 ";

• javascript
• html
• reactjs

Share Improve this question Follow asked Nov 25, 2020 at 14:07 Agustin BarrosAgustin Barros 9522 gold badges33 silver badges1414 bronze badges 2

• you can simple use br – Nisharg Shah Commented Nov 25, 2020 at 14:12
• for the bold parts use <strong> tags – The Bomb Squad Commented Nov 25, 2020 at 14:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I remend 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"

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')
);

Try this using CSS.

.white-space-pre-line {
  white-space: pre-line
}

Try this using CSS.

.white-space-pre-line { white-space: pre-line }

I found that using a different style worked for my needs

.white-space-pre-wrap {
  white-space: pre-wrap;
}