[Solved]-&nbsp jsx not working-Reactjs

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

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

Try to use utf-8 nbsp, seem as simple space, but working good without extra code.

Maybe, you should create variable for this.

For copy symbols: https://unicode-table.com/en/00A0/

For generate texts automatically, use some typograf.

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.

You could simply wrap it with Fragment:

<Fragment>&nbsp;</Fragment>

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.

{'\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