CODEWITHSUNDEEP
reactjsjsx
aashir khan
aashir khan

Reputation: 538

how to use escape characters in JSX

I want to use escape characters in React application, couldn't found a way to use escape characters in react application.

Please share if anyone knows? TIA

Upvotes: 22

Views: 89371

Answers (2)

Jack GamerEuphoria Dev
Jack GamerEuphoria Dev

Reputation: 1

Maybe this is also fine to read. There are two methods, the first with Curly Braces {} and the second one with HTML Entity.

https://github.com/airbnb/javascript/issues/1350#issue-217171296

Upvotes: 0

rjdkolb
rjdkolb

Reputation: 11838

Use the same escape as Javascript (ECMAScript)

' single quote

" double quote

\ backslash

\n new line

\r carriage return

\t tab

\b backspace

\f form feed

For the HTML portion, use HTML escape characters.

There are some minor gotchas,to be aware of like evaluating escape chars between { }

HTML:

<div id="container">
    <!-- This element's contents will be replaced with MyComponent. -->
</div>

JSX:

class MyComponent extends React.Component {
  render() {
    console.info('Test line\nbreak');
    return <div>Hello {this.props.name} &lt;> </div>;
  }
}

ReactDOM.render(
  <MyComponent name="Stackoverflow  &lt; !-- comment in name -->" />,
  document.getElementById('container')
);

This program prints this to the console:

Test line
break

And the user's screen is the following:

Hello Stackoverflow < !-- comment in name --> <>

Upvotes: 15

Related Questions