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

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

inostia · Accepted Answer · 2018-10-03 08:07:31Z

14

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.

edited Oct 3, 2018 at 8:07

answered Jan 20, 2018 at 0:36

inostia

8,0633 gold badges34 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemadri Dasari · Accepted Answer · 2018-08-17 11:24:44Z

0

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

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

answered Aug 17, 2018 at 11:24

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Collectives™ on Stack Overflow

How to add whitespaces in React JSX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related