What is {" "} in React JSX?

Question

What is meant by {" "} in React JSX? I see it in the code below:

 <p><a href="/" className="mx-1">Home</a> {" "}| {" "} <a className="mx-1" href="/about-us">About 
 Us</a> {" "}|{" "}<a className="mx-1" href="/terms">Terms</a></p>

`{` `}` is how you interpolate JavaScript expressions into JSX. `{" "}` is just interpolating a space character. — jonrsharpe, May 12 '20 at 13:37
Yes but it's not needed to interpolate a simple space is enough? — johnmadta, May 12 '20 at 13:41

score 2 · Accepted Answer · answered May 12 '20 at 13:38

{} is used to interpolate JavaScript inside your JSX.

Using {' '}is used to insert a space inside your JSX while avoiding any side effet. Using this to insert a space does not insert any HTML tag in your code.

See: Best practice when adding whitespace in JSX

score 0 · Answer 2 · answered May 12 '20 at 13:37

0

It is one of the ways of adding additional spaces.

answered May 12 '20 at 13:37

radulle

1,437
13
19

score 0 · Answer 3 · answered May 12 '20 at 13:41

0

When you want to add JavaScript inside your JSX, you need to use {}

To add a space {' '} can be used. But generally, the prettier converts some spaces in the editor into {' '}.

answered May 12 '20 at 13:41

msahin

1,520
1
16
22

What is {" "} in React JSX?

3 Answers3