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)
The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as or  .
Using <br> Tag in ReactWe use the <br> tag in HTML to break the string in between or break the section; hence, if you want to break the string, the <br> tag will be placed, and the followed content will move to the next line. For example, there is one string, and you can use the <br> , as given below.
React is clever enough to deal with spaces or any special characters. Since it uses keys only to identify objects, it should treat them as a black box. Only bad code cannot deal with spaces.
You can try:
1) Either {' '}
or {" "}
:
<li>
<i className="..."></i>
{' '}my text
</li>
2) Simply use the HTML entity
:
<li>
<i className="..."></i>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With