jsx not working

Question

I am using the &nbsp tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help.

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});

Answer 1

See: JSX In Depth

Try: Select Scenario:{'\u00A0'}

Or: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

Or: <div>&nbsp;</div>

jsfiddle

Update

After seeing some of the comments, and trying it out. It has come to my attention that using html entites inside JSX works fine (unlike what is stated in the above jsx-gotchas reference [maybe it's outdated]).

So using something like: R&D, would output: 'R&D'. There is a weird behavior with  , which causes it to render differently, thus causing me to think it doesn't work:

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

Produces:

This works simply:- -
This works simply:-  -

Answer 2

Write your jsx code wrapped in { } as shown below.

<h1>Code {' '}</h1>

You can put space or any special character here.

e.g in your case

Select Takeout Scenario: 

should be like this

Select Takeout Scenario:{' '}

It will work.

As Advice you should not use &nbsp to add extra space, you can use css to achieve same.

Answer 3

{'\u00A0'} works but is hard to read, so I wrapped it in a function component:

components/nbsp.js:

export default () => '\u00A0';

usage:

Hello<Nbsp />world

Answer 4

If this doesn't work for you {' '} then use {'\u00A0'}.

{' '} will render a space but there are some cases when you want the line height to also be rendered in a case there you want a space inside an HTML element that has no other text ie: <span style={{ lineHeight: '1em' }}>{' '}</span>, in that case you'll need to use {'\u00A0'} inside the span or HTML element.

Answer 5

You can also use ES6 template literals i.e.,

`   <li></li>` or `  ${value}`