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

Answer 1

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

div {
     white-space: pre-wrap;
}

Answer 2

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>

Answer 3

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;'}} />