Pure HTML vs React. Same content not rendered equally. Why?

Ad

I'm using react 0.14 and Foundation 5.5.2 and have noticed a weird thing when using Foundation's button groups. When I write them in pure HTML, the button groups fill the entire horizontal space, but when I write them using React, they don't, even though I'm using the exact same code.

I've used some CSS diff tool, and it doesn't find any difference in the styling between the two. I can't see any difference either when I inspect the code. I've also tried different browsers, but the problem remains.

I've created a JS-fiddle to display the problem. As you can see, the first two button groups span the whole width, but not the one's that are rendered by React.

.
Ad

Answer

Ad

Both rendered HTML are not strictly identical: the indentation made in plain HTML is rendered as whitespace between <li> elements, whereas React removes that whitespace (it may come from the JSX transpiler).

On this fiddle I've removed the whitespace by surrounding the indentation with HTML comments, so it won't be rendered anymore: https://jsfiddle.net/3s5mego4/

Now both outputs are strictly identical.

Ad
source: stackoverflow.com
Ad