How to use escape characters in JSX React components?

Sometimes, we want to use escape characters in JSX React components.

In this article, we’ll look at how to use escape characters in JSX React components.

How to use escape characters in JSX React components?

To use escape characters in JSX React components, we can use the same ones as plain JavaScript.

JavaScript escape characters include:

• ' single quote
• " double quote
• \ backslash
• \n new line
• \r carriage return
• \t tab
• \b backspace
• \f form feed

We can also use HTML escape characters in JSX.

To do so, we can put them directly between the element’s tags.

For instance, we can write:

import React from "react";

export default function App() {
  return <div>First &middot; Second</div>;
}

Then we get ‘First · Second’ as a result.

Conclusion

To use escape characters in JSX React components, we can use the same ones as plain JavaScript.

We can also use HTML escape characters in JSX.

To do so, we can put them directly between the element’s tags.