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:

classSimpleExampleextendsReact.Component {
	render() {
		return (
			<div><div>NO</div><div>SPACES</div>
        HERE
			</div>
		);
	}
}

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

div {
  display:inline-block;
}

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