How to add whitespaces in React JSX

Question

I have this li tag

<li className='u-cursor--pointer u-padding-vertical-small c-start-retro-line'
  key={project.get('id')}
  onClick={() => this.handleProjectSelection(project.get('id'))} >
  <i className='fa fa-square' style={{color: project.get('color')}}></i>
  {project.get('name') === 'default' ? 'No Project' : project.get('name')}
</li>

And I need to add an space between the <i></i> tag and what's inside the {} {project.get('name') === 'default' ? 'No Project' : project.get('name')} {project.get('name') === 'default' ? 'No Project' : project.get('name')}

How can I do this? I tried <span></span> but It doesn't work (I need an extra space, not a new line)

Answer 1

You can try:

1) Either {' '} or {" "} :

<li>
    <i className="..."></i>
    {' '}my text
</li> 

2) Simply use the HTML entity   :

<li>
    <i className="..."></i>
    &nbsp;my text
</li> 

3) Alternatively, you could insert spaces in the strings:

<li>
    <i className="..."></i>
    {project.get('name') === 'default' ? ' No Project' : ` ${project.get('name')}`}
</li>

In the last example, notice the use of string substitution .

Answer 2

在打印html内容时，也可以在危险地设置InnerHTML中使用＆nbsp

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