how to use escape characters in JSX

Question

I want to use some escape characters in my React application but I have not found any resource that how can I use escape character in my application.

Is any methodology available?

Answer 1

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 --> <>