ReactJS <p/> or <br/> not working in render() - html

Question

I can't get <p/> or <br/> to create new lines when used after a custom ReactJS component that uses this Bootstrap CSS in the form <div className="col-sm-10"> i.e.
var MyChatClientView = React.createClass({
render: function() {
return (
<div>
<h2>Chat</h2>
<span>Type something</span>
<MyChatForm />
<p/>
<br/>
<div>
This text is on the same line as MyChatForm, I want it on a new line!
</div>
</div>
);
}
});
var MyChatForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
},
render: function() {
return (
<div>
<form role="form" onSubmit={this.handleSubmit}>
<div className="form-group">
<input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
</div>
<div className="form-group">
<div className="col-sm-10">
<button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
</div>
</div>
</form>
</div>
);
}
});

Answer 1

To size form controls using Bootstrap, either (1) your form needs the form-horizontal class or (2) your columns need to be wrapped in an element with the row class.
This is covered in the control sizing section of the Bootstrap docs.
In your case it seems to make sense to replace the form-group with the needed row:
var MyChatForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
},
render: function() {
return (
<div>
<form role="form" onSubmit={this.handleSubmit}>
<div className="form-group">
<input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
</div>
<div className="row">
<div className="col-sm-10">
<button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
</div>
</div>
</form>
</div>
);
}
});