Spaces between elements in React?

Question

In plain html the following results in a space between the two buttons, but in React it doesn't:

  <button> Button 1 </button>

  <button> Button 2 </button>

I'm having to resort to the following to get a space.

  <button> Button 1 </button>
  {' '}
  <button> Button 2 </button>

This is unexpected. And before anyone gives CSS solutions, note that the following also results in no spaces between the output:

{'firstname'}

{'lastname'}

Gives:

firstnamelastname

What is the normal way to have spaces (ideally the HTML does it)?

I've also found that this type of interpolation can work, but feels awful to me:

  {`
    ${this.date()}
    - 
    ${this.verb()} @
    ${this.time()}
    -
    flight
    ${this.props.flight.airline.codeIcao}
    ${this.props.flight.number}
     - 
    ${this.props.flight.airport.codeIcao}
 `}

That's *not* unexpected. See https://github.com/facebook/react/issues/1643#issuecomment-45148887 — jonrsharpe, Jun 12 '19 at 18:04
@jonrsharpe You see the number of downvotes there? It IS unexpected for people new to React. Regardless of what is expected, the question remains of how to actually GET the spaces. — pixelearth, Jun 12 '19 at 18:12
@jonrsharpe the question is what is the "normal" or right way to do this. But you know what the question is. If the way I'm doing it is "normal", you could have just said that. — pixelearth, Jun 12 '19 at 18:24
And that's what he said, by linking the appropriate reference! — Emile Bergeron, Jun 12 '19 at 18:50
Possible duplicate of [Best practice when adding whitespace in JSX](https://stackoverflow.com/questions/40264084/best-practice-when-adding-whitespace-in-jsx) — Emile Bergeron, Jun 12 '19 at 18:55
Your example isn't even related to JSX, it's just a simple string interpolation, which could feel less awful with a little destructuring. `${this.date()} - ${this.verb()} @ ${this.time()} - flight ${airline.codeIcao} ${flight.number} ${airport.codeIcao}` — Emile Bergeron, Jun 12 '19 at 19:05

score 2 · Answer 1 · answered Jun 12 '19 at 18:27

2

you can simply use

{`${firstName} ${lastName}`}  // firstName and lastName are variables holding the actual value

If you are using any html elements like div, button, etc then you need to use css classes to manage the margin of elements.

answered Jun 12 '19 at 18:27

Prabhakar Matkar

66
4

The interpolation option was already listed in my question as a possible solution. – pixelearth Jun 12 '19 at 18:34
1

Interpolation is usually how I usually handle spacing. HTML space entry and {' '} also work though. – Matt Jun 12 '19 at 18:36

score 0 · Answer 2 · answered Jun 12 '19 at 18:35

if you want a space in pure HTML what about   ?

          <div>
            <button>
              text1
            </button>
            &nbsp;
            <button>
              text1
            </button>
          </div>

Working example on stackblitz : demo

score 0 · Answer 3 · answered Apr 02 '22 at 10:47

0

you can use &ensp; and &emsp; to add two and four non-breaking spaces

answered Apr 02 '22 at 10:47

Kestutis Petkelis

1

Spaces between elements in React?

3 Answers3