Getting line breaks with string literals in html elements using React

Question

I have a problem I am trying to solve. I saw some other questions but they didn't have the same issue as me. This is what I am currently am trying to do.

Text.js

export let exampleText = `This should be line 1
And this should be line 2
\n Maybe this will be line 2?
\\n or maybe this?`

app.jsx

var aboutItems = {
    headerClass: "aboutSection content",
    header: "About Me",
    subtitle: "Developer. Entrepreneur. Engineer.",
    text: Text.exampleText
}
class Site extends React.Component {
    render() {
        return (
            <div>
               <Section items = {aboutItems}/>
            </div>

        );
    }
}
class Section extends React.Component {
    render() {
        return (
            <div className = {this.props.items.headerClass}>
                <h1>{this.props.items.header}</h1>
                <h2>{this.props.items.subtitle}</h2>
                <p className="multi-line">{this.props.items.text}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <Site />,
    document.getElementById("root")
);

However when the text comes it shows as this in the html:

This should be line 1 And this should be line 2 Maybe this will be line 2? \n or maybe this?

I tried adding a css style in class multi-line such as white-space: pre and though this does add the multi line it doesn't remove other whitespace so using styling such as padding or margins no longer worked.

What is the work around to this, or a better practice?

Thanks in advance.

can you give an example where padding and margin stopped working? I can't reproduce that. stackblitz.com/edit/react-jdhc9s — azium
– azium, Commented Jan 2, 2018 at 21:32

Sagiv b.g · Accepted Answer · 2018-01-02 21:28:35Z

17

You should use the css rule of

white-space: pre-line;

With combination of string literals or \n

Here is a running example with string literals:

const App = () => (
  <div className="line-break">
    {`this is line 1 
    
     
     
     and this is line 2`
    }
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

answered Jan 2, 2018 at 21:28

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj · Accepted Answer · 2018-01-02 22:01:49Z

The answer provided by @Sagiv b.g is correct.

white-space: pre-line

is the key here.

Please find CodePen Link for your example

JSX:

let exampleText = `This should be line 1
And this should be line 2
Maybe this will be line 3?
or maybe this?`;

var aboutItems = {
    headerClass: "aboutSection content",
    header: "About Me",
    subtitle: "Developer. Entrepreneur. Engineer.",
    text: exampleText
}
class Site extends React.Component {
    render() {
        return (
            <div>
               <Section items = {aboutItems}/>
            </div>

        );
    }
}
class Section extends React.Component {
    render() {
        return (
            <div className = {this.props.items.headerClass}>
                <h1>{this.props.items.header}</h1>
                <h2>{this.props.items.subtitle}</h2>
                <p className="multiline">{this.props.items.text}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <Site />,
    document.getElementById("root")
);

CSS:

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

Collectives™ on Stack Overflow

Getting line breaks with string literals in html elements using React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related