Different output when passing string by props and using a const value

Question

I want to pass text to my react component using props. The important thing is I need the new line symbol ("\n") to work.

My example is very simple:

class UnderlinedText extends React.Component {
  render() {
    const text = 'Hello\n this is a test'; // this works
    // const text = this.props.text; this does NOT work
    return (
      <div className="textContainer">{text}</div>
    );
  }
}

ReactDOM.render(
  <UnderlinedText />,
  document.getElementById("root")
);

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

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Using the hardcoded text above everything works as it should (even in debug I see that the string spans in multiple lines). But using it via props like so:

class UnderlinedText extends React.Component {
  render() {
    const text = this.props.text;
    return (
      <div className="textContainer">{text}</div>
    );
  }
}

ReactDOM.render(
  <UnderlinedText text='Hello\n this is a test' />,
  document.getElementById("root")
);

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

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

does not create the new lines and the string in debug has all the new line symbols ("\n") in it.

Where is the difference between those two solutions? And how to solve it?

Well what exactly does this.props.text contain?

Pointy
– Pointy

2018-12-29 16:35:02 +00:00
Commented Dec 29, 2018 at 16:35 — Pointy
– Pointy, Commented Dec 29, 2018 at 16:35
the value is: "Hello\n this is a test"

L3M0L
– L3M0L

2018-12-29 16:39:51 +00:00
Commented Dec 29, 2018 at 16:39 — L3M0L
– L3M0L, Commented Dec 29, 2018 at 16:39

T.J. Crowder · Accepted Answer · 2018-12-29 16:46:57Z

3

Because you're using a literal string in

<UnderlinedText text='Hello\n this is a test' />

React is treating it as literal text. \n is \ and n, just like it would be in an HTML attribute.

If you want to supply a JavaScript string with JavaScript escape sequences in it, use {} around it to switch to a JavaScript expression context:

<UnderlinedText text={'Hello\n this is a test'} />

Live Example:

class UnderlinedText extends React.Component {
  render() {
    const text = this.props.text;
    return (
      <div className="textContainer">{text}</div>
    );
  }
}

ReactDOM.render(
  <UnderlinedText text={'Hello\n this is a test'} />,
  document.getElementById("root")
);

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

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

answered Dec 29, 2018 at 16:46

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

L3M0L Over a year ago

It works! Thx! Since the solution was soooo easy I feel super stupid now :(

T.J. Crowder Over a year ago

@L3M0L - No need. :-) There are a lot of layers in this stuff, easy to get caught between them.

Collectives™ on Stack Overflow

Different output when passing string by props and using a const value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related