[javascript] Best practice when adding whitespace in JSX

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

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

Add them on one line

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

Add space with JS

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

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.

I tend to use  

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

It's easy to identify exactly what I'm trying to do here when I come back to the code weeks later.

If the goal is to seperate two elements, you can use CSS like below:

A<span style={{paddingLeft: '20px'}}>B</span>

You can use curly braces like expression with both double quotes and single quotes for space i.e.,

{" "} or {' '}

You can also use ES6 template literals i.e.,

`   <li></li>` or `  ${value}`

You can also use &nbsp like below (inside span)

<span>sample text &nbsp; </span>

You can also use &nbsp in dangerouslySetInnerHTML when printing html content

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

use {} or {``} or   to create space between span element and content.

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>

You don't need to insert   or wrap your extra-space with <span/>. Just use HTML entity code for space -  

Insert regular space as HTML-entity

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>

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

div {
     white-space: pre-wrap;
}

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.