CODEWITHSUNDEEP
htmlreactjsjsx
Indraneel Bende
Indraneel Bende

Reputation: 3486

&nbsp jsx not working

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

});

Upvotes: 200

Views: 217475

Answers (12)

Oboroten
Oboroten

Reputation: 431

I like <>&nbsp;</>, it's clear

Upvotes: 2

perona chan
perona chan

Reputation: 191

This code works for me

hello<span style={{ paddingRight: 5 }}/>world
// -> hello world

Upvotes: 0

kien con
kien con

Reputation: 21

I think we should use CSS when manipulating JSX with white space. It's a better approach and has a good deal with string type when the value includes many white spaces.

const ExampleComponent = () => {
  const [text, setText] = useState('     hello            white space  !');
  return (
    <p style={{ whiteSpace: "pre-wrap" }}>{text}</p>
  )
};

Upvotes: 0

Olu
Olu

Reputation: 77

I came across these solutions while searching for similar solution for REACT NATIVE. The solution {' '} works fine. Interesting also to note that the length of space can be widened by increasing the length within the single quote. For REACTJS, the best approach for me is css and <span style={stylename}></span> The stylename will mainly set the right or left margin whichever one prefers

Upvotes: 0

BlueScatPack
BlueScatPack

Reputation: 31

I used <span>&nbsp;</span> and it worked.

Upvotes: 3

bcngr
bcngr

Reputation: 845

You could simply wrap it with Fragment:

<Fragment>&nbsp;</Fragment>

Upvotes: 24

Pablo
Pablo

Reputation: 83

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.

Upvotes: 1

omerts
omerts

Reputation: 8838

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&amp;D, would output: 'R&D'. There is a weird behavior with &nbsp;, 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:-  -

Upvotes: 364

Dmitry Pashkevich
Dmitry Pashkevich

Reputation: 13536

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

Upvotes: 49

Cory Robinson
Cory Robinson

Reputation: 5272

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.

Upvotes: 11

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

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

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

Upvotes: -2

WitVault
WitVault

Reputation: 24130

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.

Upvotes: 19

Related Questions