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

});

Did you search? First hit: https://www.google.com/search?q=react+html+entities — Felix Kling, Jun 19 '16 at 17:10
I don't think there is anything wrong with your code. Which Babel and React version are using? Make sure to use the latest versions. You can see in the [Babel repl](https://babeljs.io/repl/#?evaluate=false&lineWrap=false&presets=react) that the generated code contains non-breaking whitespace characters. — Felix Kling, Jun 19 '16 at 17:29
Well now the first hit is this. :) https://duckduckgo.com/?q=jsx+nbsp — Marc Stober, Jul 28 '16 at 20:34

score 342 · Accepted Answer · edited Aug 19 '19 at 22:08

342

See: JSX In Depth

Try: Select Scenario:{'\u00A0'}

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

Or: <div> </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:-  -

edited Aug 19 '19 at 22:08

Edgar

6,022
8
33
66

answered Jun 19 '16 at 16:24

omerts

8,485
2
32
39

14

So the answer is using the unicode value corresponding to the html entity and using it inside a javascript string. Thanks for your help. – Indraneel Bende Jun 19 '16 at 16:29
@IndraneelBende ` ` should work fine. There is some problem with the value in style attribute. – Gaurav Kumar Jun 19 '16 at 16:30
@Gaurav Kumar, I also tried didn't work, it is just ignored. Could you please add to the fiddle in my answer? – omerts Jun 19 '16 at 16:44
1

`
Doesn't work: - -
` works just fine for me. *edit:* Well, it doesn't seem to be a non-breaking space. – Felix Kling Jun 19 '16 at 17:07
Mmh, produces the expected output on the React website itself though... – Felix Kling Jun 19 '16 at 17:17
Maybe on React site they have wrapped it with `dangerouslySetInnerHTML`, or something – omerts Jun 19 '16 at 17:20
I could imagine it's an issue with the Babel version jsfiddle is using. Babel v6.9.1. Copy your code [here](https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=react&experimental=false&loose=false&spec=false&code=). – Felix Kling Jun 19 '16 at 17:28
@omerts check this. https://jsfiddle.net/rickgaurav/hofp8w66/. Also in your fiddle the second Doesn't work line work fine if u see closely. – Gaurav Kumar Jun 20 '16 at 08:17
@GauravKumar Look at the difference: https://jsfiddle.net/omerts/hofp8w66/2/. It caused me to think it doesn't work. I tried other entites, and you are right, they did work, edited my answer. – omerts Jun 20 '16 at 08:50
@omerts look at this. https://jsfiddle.net/rickgaurav/sfehkL1y/ . I have made changes to your fiddle to fix issue with your code. Also for string interpolation in ES6 operator `\`` is used , not `'` . Anyways there was no need to for any interpolation as it is itself a character not a variable. – Gaurav Kumar Jun 20 '16 at 12:24
@GauravKumar I still see a difference: https://s32.postimg.org/jcu3s26fp/space.jpg – omerts Jun 20 '16 at 12:55
To clarify... \u00A0 works because it is the Unicode character "NO-BREAK SPACE". So you can pass it around in a JavaScript string, and then when it is output, it works like – Dan Cron Oct 19 '18 at 18:41
Better to use it inside react fragment, `<> >` – Pankaj Phartiyal Jun 25 '19 at 11:22
2

It's worth noting that `u00A0` is being blacklisted by browsers due to phishing schemes. http://kb.mozillazine.org/Network.IDN.blacklist_chars – Andrew Hill Feb 18 '20 at 13:53
3

@AndrewHill this document is about domain names, what's the relation to JSX/HTML? – Infensus Sep 01 '21 at 11:26

score 44 · Answer 2 · answered Feb 01 '19 at 19:04

44

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

answered Feb 01 '19 at 19:04

Dmitry Pashkevich

13,431
9
55
73

Thanks. This works well! FWIW it may also be used in a template literal like `const h = \` Hello${Nbsp()}world\`; ... {h}` – Davey Jan 24 '22 at 09:16

WitVault · Answer 3 · 2016-06-19T17:04:02.767

20

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:&nbsp;

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.

edited Jun 19 '16 at 17:04

answered Jun 19 '16 at 16:57

WitVault

23,445
19
103
133

2

This is just to add whitespace, but won't work for other html entities – omerts Jun 19 '16 at 17:04
12

That not a *non-breaking* space though. – TimoSolo Aug 30 '17 at 21:18
1

@TimoSolo I do not encourage you to use &nbsp or above mentioned technique. You can try the first answer if mine is not working. Thanks. – WitVault Aug 31 '17 at 13:15
1

"use css to achieve same" - You might be using non breaking space so your text does not drop down to the next line and outside the boundary of the element which contains the text. If you want to use CSS properties to do this instead, then one way to do this is `text-overflow: "clip";` `overflow: "hidden";`. There are a few variations available. – Dan Cron Oct 22 '18 at 13:41

score 18 · Answer 4 · answered Mar 23 '21 at 14:59

18

You could simply wrap it with Fragment:

<Fragment> </Fragment>

answered Mar 23 '21 at 14:59

bcngr

745
6
13

12

You can even simplify it by using: `<> >` – knnhcn May 04 '21 at 08:19

score 9 · Answer 5 · answered Jan 15 '19 at 02:48

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.

Pablo · Answer 6 · 2020-07-30T16:21:19.680

1

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.

edited Jul 30 '20 at 16:21

answered May 15 '20 at 08:13

Pablo

65
8

score 1 · Answer 7 · answered Sep 11 '22 at 15:47

1

I used <span> </span> and it worked.

answered Sep 11 '22 at 15:47

BlueScatPack

11
2

score -1 · Answer 8 · answered Aug 17 '18 at 11:23

-1

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

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

answered Aug 17 '18 at 11:23

Hemadri Dasari

32,666
37
119
162

2

What does this answer have to do with html entities? – boatcoder Oct 02 '19 at 20:49

jsx not working

8 Answers8

Update

Linked