Best practice when adding whitespace in JSX

Question

I understand how  and why  to add a whitespace in JSX  but I am wondering what s best practice or if any makes any real difference   Wrap both elements in a span   lt div className  top-element-formatting  gt     lt span gt Hello  lt  span gt     lt span className  second-word-formatting  gt World  lt  span gt   lt  div gt    Add them on one line     lt div className  top-element-formatting  gt      Hello  lt span className  second-word-formatting  gt World  lt  span gt     lt  div gt    Add space with JS   lt div className  top-element-formatting  gt      Hello            lt span className  second-word-formatting  gt World  lt  span gt   lt  div gt

User · Answer

I have been trying to think of a good convention to use when placing text next to components on different lines, and found a couple good options:

<p>
    Hello {
        <span>World</span>
    }!
</p>

or

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

Each of these produces clean html without additional   or other extraneous markup. It creates fewer text nodes than using {' '}, and allows using of html entities where {' hello & goodbye '} does not.

User · Answer

You can use curly braces like expression with both double quotes and single quotes for space i e     quot   quot   or        You can also use ES6 template literals i e        lt li gt  lt  li gt   or      value    You can also use  amp nbsp like below  inside span   lt span gt sample text  amp nbsp   lt  span gt   You can also use  amp nbsp in dangerouslySetInnerHTML when printing html content  lt div dangerouslySetInnerHTML     html   sample html text   amp nbsp       gt

User · Answer

You can add simple white space with quotes sign         Also you can use template literals  which allow to insert  embedd expressions  code inside curly braces       2   a   b     -     Notice this sign       its not normal quotes

User · Answer

use    or      or  amp nbsp  to create space between span element and content    lt b gt   notif name   lt  b gt   lt span id  value  gt   amp nbsp   notif count        lt  span gt

User · Answer

You don t need to insert  amp nbsp  or wrap your extra-space with  lt span  gt   Just use HTML entity code for space -  amp  32   Insert regular space as HTML-entity   lt form gt     lt div gt Full name  lt  span gt  amp  32     lt span gt  this props fullName  lt  span gt   lt  form gt

User · Answer

You can use the css property white-space and set it to pre-wrap to the enclosing div element   div        white-space  pre-wrap

User · Answer

Because  amp nbsp causes you to have non-breaking spaces  you should only use it where necessary  In most cases  this will have unintended side effects  Older versions of React  I believe all those before v14  would automatically insert  lt span gt   lt  span gt  when you had a newline inside of a tag  While they no longer do this  that s a safe way to handle this in your own code  Unless you have styling that specifically targets span  bad practice in general   then this is the safest route  Per your example  you can put them on a single line together as it s pretty short  In longer-line scenarios  this is how you should probably do it      lt div className  quot top-element-formatting quot  gt      Hello  lt span className  quot second-word-formatting quot  gt World  lt  span gt       lt span gt   lt  span gt      So much more text in this box that it really needs to be on another line     lt  div gt    This method is also safe against auto-trimming text editors  The other method is using       which doesn t insert random HTML tags  This could be more useful when styling  highlighting elements  and removes clutter from the DOM  If you don t need backwards compatibility with React v14 or earlier  this should be your preferred method      lt div className  quot top-element-formatting quot  gt      Hello  lt span className  quot second-word-formatting quot  gt World  lt  span gt                So much more text in this box that it really needs to be on another line     lt  div gt

User · Answer

If the goal is to seperate two elements  you can use CSS like below   A lt span style   paddingLeft   20px    gt B lt  span gt

User · Answer

I tend to use  amp nbsp   It s not pretty but it s the least confusing way to add whitespace I ve found and it gives me absolute control over how much whitespace I add   If I want to add 5 spaces   Hello amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  lt span className  second-word-formatting  gt World  lt  span gt   It s easy to identify exactly what I m trying to do here when I come back to the code weeks later

[javascript] Best practice when adding whitespace in JSX

Examples related to javascript

Examples related to reactjs

Examples related to react-jsx