I am trying to add br tag between the text in react. can you guys tell me how to add it. I tried adding br tag... but if I add I get
tag in the browser. providng my code below. can you guys tell me how to fix it.

let sportsDescription = '';

        if(sportsInfo !== '' && !isSportsSetupActive) {
            sportsDescription = 'testing <br /> testing';

        }else if(isSportsSetupActive) {
            sportsDescription = 'testing <br /> testing';

        }



        return (
            <div id="main" className="section flex-container flex-full">
                <section className="page-content flex-item">
                    <section className="gray-box">
                        <h2>Wele to your  dashboard{formatName}.</h2>
                        <p className="ft-intro ft-day1 ft-day2">{sportsDescription}</p>

                    </section>
                </section>
            </div>
    );

I am trying to add br tag between the text in react. can you guys tell me how to add it. I tried adding br tag... but if I add I get
tag in the browser. providng my code below. can you guys tell me how to fix it.

let sportsDescription = '';

        if(sportsInfo !== '' && !isSportsSetupActive) {
            sportsDescription = 'testing <br /> testing';

        }else if(isSportsSetupActive) {
            sportsDescription = 'testing <br /> testing';

        }



        return (
            <div id="main" className="section flex-container flex-full">
                <section className="page-content flex-item">
                    <section className="gray-box">
                        <h2>Wele to your  dashboard{formatName}.</h2>
                        <p className="ft-intro ft-day1 ft-day2">{sportsDescription}</p>

                    </section>
                </section>
            </div>
    );

• javascript
• jquery
• html
• reactjs
• redux

2 Answers 2

From the ReactJS Docs...

In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it's dangerous.

In your example, {sportsDescription} is interpreted as a string. React won't see anything inside that variable as a DOM element. That's why your <br/> only renders as a string.

Alternatively, you could do this (but it's generally a bad idea)...

 <p 
   className="ft-intro ft-day1 ft-day2" 
   dangerouslySetInnerHTML={{__html:sportsDescription}} 
 />

This way, React correctly recognized your intent to include HTML inside the string sportsDescription and renders the desired <br/> element.

Here's a quote from an article that goes into greater detail about Getting Started with ReactJS:

The React module has a createClass method that takes an object as its only parameter. We define only one key to start with: render. The value of render is a function that returns a virtual DOM element. One of the keys to React’s performance is its virtual DOM abstraction. Essentially, it’s a difference engine that calculates the difference between the existing DOM and the DOM that is to be rendered and only modifies the necessary elements and attributes. Inside the render function, you may have noticed that I included HTML markup. That’s JSX. It won’t pass validation as legal Javascript. Instead, it requires the Babel transpiler.

JSX only looks like HTML. JSX is just a syntactic extension of Javascript, where every JSX "tag" is actually a call of React.createElement function. SO you can't treat JSX as HTML, and therefore you can't simply use strings with HTML inside and expect them to act like DOM. What you should do is return other valid JSX:

    let sportsDescription = '';

    if(sportsInfo !== '' && !isSportsSetupActive) {
        sportsDescription = (
            <span>testing<br />testing</span>
        );
    } else if(isSportsSetupActive) {
        sportsDescription = (
            <span>testing<br />testing</span>
        );
    }

    return (
        <div id="main" className="section flex-container flex-full">
            <section className="page-content flex-item">
                <section className="gray-box">
                    <h2>Wele to your  dashboard{formatName}.</h2>
                    <p className="ft-intro ft-day1 ft-day2">{sportsDescription}</p>
                </section>
            </section>
        </div>
);

Here,

<span>testing<br />testing</span>

is actually four calls of React.createElement, the first one is for span element, and three other are for its children: text node, br, text node.

Please read the documentation carefully.