Take a look at this awesome code snippet. Can anyone help me figure out how to eliminate the space between lines? I've already attempted removing <br />, but it hasn't made any difference. I also don't want to resort to using negative margin-bottom values. Not sure if this is related to React or CSS.
HTML
<div id="app"></div>CSS
div.square {
display: inline-block;
width: 20px;
height: 20px;
}React
class Square extends React.Component {
constructor(props) {
super(props);
this.style = {
backgroundColor: 'yellow',
borderStyle: 'solid',
borderWidth: 1
}
}
render () {
return (<div class = "square" style = {this.style}></div>);
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
var ret = [];
for (var i = 0; i < this.props.m; i++) {
for (var j = 0; j < this.props.n; j++) {
ret.push(<Square></Square>);
}
//ret.push(<br />); Commented out line causing spacing issue
}
return ret;
}
}
ReactDOM.render(<App m = "10" n = "10" />,document.querySelector("#app"));