How to avoid JSX component from condensing when React.js rendering it?

Question

I find out that React.js will condense JSX component HTML tags when rendering, is it possible to avoid this?

For example, I have a jsx component defined in this way:

Answer 1

Don’t forget that JSX is just sugar for function calls. So this...

<div id="wrapper">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

...is just sugar for this:

React.createElement("div", { id: "wrapper" },
  React.createElement("span", null, "1"),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

If you want whitespace between elements which appear on different lines, you can either add some manually…

<div id="wrapper">
  <span>1</span>{" "}
  <span>2</span>{" "}
  <span>3</span>
</div>

…or open new elements on the same line with whitespace between them (the JSX transpiler respects content between elements, just not linebreaks which are adjacent to elements):

<div id="wrapper">
  <span>1</span> <span>2</span> <span>3</span>
</div>

…both of which transpile to this:

React.createElement("div", { id: "wrapper" },
  React.createElement("span", null, "1"),
  " ",
  React.createElement("span", null, "2"),
  " ",
  React.createElement("span", null, "3")
);

Answer 2

If it's appropriate, you can use display: inline-block with side margin equal to the space width:

#wrapper span {
  display: inline-block;
  margin-right: 0.28em;
}