& nbsp jsx no funciona

Estoy usando la etiqueta & nbsp en jsx y no representa el espacio. El siguiente es un pequeño fragmento de mi código. Por favor, ayuda.

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

});

Ver: JSX en profundidad

Tratar: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Actualizar

Después de ver algunos de los comentarios y probarlo. Me ha llamado la atención que el uso de html entites dentro de JSX funciona bien (a diferencia de lo que se indica en la referencia jsx-gotchas anterior [tal vez esté desactualizado]).

Entonces, usando algo como:, R&Ddaría como resultado: 'I + D'. Hay un comportamiento extraño con  , que hace que se renderice de manera diferente, lo que me hace pensar que no funciona:

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

Produce:

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

{'\u00A0'}funciona pero es difícil de leer, así que lo envolví en un componente de función :

componentes / nbsp.js:

export default () => '\u00A0';

uso:

Hello<Nbsp />world

Escribe tu jsxcódigo envuelto en{ } como se muestra a continuación.

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

Puedes poner espacio o cualquier carácter especial aquí.

por ejemplo, en tu caso

Select Takeout Scenario: 

debería ser así

Select Takeout Scenario:{' '}

Funcionará.

Como consejo que no debe usar &nbsppara agregar espacio adicional, puede usar css para lograr lo mismo.

Si esto no funciona para usted {' '}, use {'\u00A0'}.

{' '}representará un espacio, pero hay algunos casos en los que desea que la altura de la línea también se represente en un caso en el que desea un espacio dentro de un elemento HTML que no tiene otro texto, es decir <span style={{ lineHeight: '1em' }}>{' '}</span>, en ese caso, deberá usarlo {'\u00A0'}dentro del span o elemento HTML.

Intente usar utf-8 nbsp, parece un espacio simple, pero funciona bien sin código adicional.

Quizás, deberías crear una variable para esto.

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

Para generar textos de forma automática, utilice algunos typograf.

También puede usar literales de plantilla ES6, es decir,

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