Remove Space Between Inline-block Elements In React

Before you mark this question as a duplicate, please read this: What I am trying is to specifically do this in react, if this was html this would be as easy as doing something like

Solution 1:

React specifically doesn't add whitespace between block elements, you need to do that yourself manually. See this discussion on Github and an official blog post explaining the details.

Here is a simple example:

class SimpleExample extends React.Component {
	render() {
		return (
			<div>
        <div>NO</div>
        <div>SPACES</div>
        HERE
			</div>
		);
	}
}

ReactDOM.render(<SimpleExample />, document.getElementById('example'));

div {
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="example"></div>