Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do people put { " " } in their React / JSX?

Tags:

reactjs

jsx

I have this in some React documentation, as well as screencasts. People will write { " " } inside of their JSX templates.

Why do they do this? It looks like they are using it as an alternative to line breaks, but I don't see that explicitly explained anywhere.

like image 709
Rick Avatar asked Jul 24 '16 00:07

Rick


People also ask

Why do we use JSX in React?

JSX makes it easier to write or add HTML in React. JSX can easily convert HTML tags to react elements. It is faster than regular JavaScript. JSX allows us to put HTML elements in DOM without using appendChild() or createElement() method.

Is it mandatory to use JSX in React?

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.

Why do we use props inside our JSX?

We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties. They are useful when you want the flow of data in your app to be dynamic.

Should I save React files as JS or JSX?

And since react is just a library for javascript, it makes no difference for you to choose between JSX or JS. They're completely interchangeable!


1 Answers

This is used to put an explicit space in a text block, since leading and trailing spaces are ignored at compile/transformation time when there is another tag.

Example:

<div>  Text  <a>some Text</a> </div> 

Will result with Textsome Text on the screen. (see the missing space)

<div>  Text{' '}  <a>some Text</a> </div> 

Will result as wanted with Text some Text on the screen.

like image 129
Hugo Dozois Avatar answered Oct 04 '22 03:10

Hugo Dozois