CODEWITHSUNDEEP
javascripthtmlcssreactjsjsx
Lizz Parody
Lizz Parody

Reputation: 1765

How to add whitespaces in React JSX

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)

Upvotes: 5

Views: 18123

Answers (2)

inostia
inostia

Reputation: 8023

You can try:

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

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

2) Simply use the HTML entity &nbsp;:

<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.

Upvotes: 14

Hemadri Dasari
Hemadri Dasari

Reputation: 33984

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

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

Upvotes: 0

Related Questions