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')}

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

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')}

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

• javascript
• html
• css
• reactjs
• jsx

2 Answers 2

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.

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

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