0

I have run into issue related to How to avoid JSX component from condensing when React.js rendering it? . I would like to find a way how to avoid using {' '}. I have red somewhere that changing collapseWhitespace to false in webpack could resolve it. Is it achievable?

Edvards Niedre
  • 620
  • 1
  • 6
  • 20

1 Answers1

0

Inside JSX create-react-app will not collapse any white space, so

<p>Hello   World - Hello{'   '}World</p>

will result in:

<p>Hello   World - Hello   World</p>

However, the browser will usually collapse these white spaces into a single one. To prevent this set the 'white-space' css property like this:

<p style={{ whiteSpace: 'pre' }}>Hello   World - Hello{'   '}World</p>

The collapseWhitespace property exists for HTML minification as part of the html-webpack-plugin. This property is true for CRA and will minify the contents of public/index.html. In order to disable it you would have to eject.

See: cra-webpack-config

matthiasgiger
  • 1,086
  • 9
  • 17
  • 1
    Im my case I am talking about white spaces between inline-block elements `{' '} ` As some CSS frameworks rely on inline block spacing. More info on issue: https://css-tricks.com/fighting-the-space-between-inline-block-elements/. Would setting `collapseWhitespace` to `false` keep the white spaces between inline-block elements? I do not want to get rig of this spaces but leave them. – Edvards Niedre Feb 13 '20 at 16:25
  • I have tried to `eject` and change `collapseWhitespace` to `false` it still removes whitespaces between inline-block elements. – Edvards Niedre Feb 13 '20 at 21:19
  • collapseWhitespace will not have an effect on the React JSX part. As described in the answer, the spaces from JSX will not be collapsed. So when I tried your example I've had two spaces in between input and label. The issue might be related to the CSS framework you're using. – matthiasgiger Feb 14 '20 at 16:36