& nbsp jsx não funciona

Estou usando a tag & nbsp em jsx e ela não está renderizando o espaço. A seguir está um pequeno trecho do meu código. Por favor, ajude.

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>
    );
  },

});

Veja: JSX em profundidade

Experimentar: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Atualizar

Depois de ver alguns dos comentários e experimentar. Chegou ao meu conhecimento que usar entidades html dentro de JSX funciona bem (ao contrário do que é declarado na referência jsx-gotchas acima [talvez esteja desatualizado]).

Então, usando algo como R&D:, produziria: 'R&D'. Há um comportamento estranho com  , que faz com que seja renderizado de forma diferente, fazendo-me pensar que não funciona:

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

Produz:

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

Escreva seu jsxcódigo agrupado { }conforme mostrado abaixo.

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

Você pode colocar espaço ou qualquer caractere especial aqui.

por exemplo, no seu caso

Select Takeout Scenario: 

deveria ser assim

Select Takeout Scenario:{' '}

Vai funcionar.

Como Conselho você não deve usar &nbsppara adicionar espaço extra, você pode usar css para conseguir o mesmo.

{'\u00A0'}funciona, mas é difícil de ler, então envolvi-o em um componente de função :

components / nbsp.js:

export default () => '\u00A0';

uso:

Hello<Nbsp />world

Se isso não funcionar para você {' '}, use {'\u00A0'}.

{' '}irá renderizar um espaço, mas há alguns casos em que você deseja que a altura da linha também seja renderizada, em um caso em que você deseja um espaço dentro de um elemento HTML que não tem outro texto, ou seja:, <span style={{ lineHeight: '1em' }}>{' '}</span>nesse caso você precisará usar {'\u00A0'}dentro de span ou elemento HTML.

Tente usar utf-8 nbsp, parece um espaço simples, mas funcionando bem sem código extra.

Talvez você deva criar uma variável para isso.

Para copiar símbolos: https://unicode-table.com/en/00A0/

Para gerar textos automaticamente, use algum typograf.

Você também pode usar literais de modelo ES6, ou seja,

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