I am starting a new project where I am using Flask + React + Bootstrap, but the Bootstrap within JSX is not working for some reason.
I am using gulp-react to transform JSX into JS.
Here is the JSX (literally an example from bootstrap website):
var Example = React.createClass({
render: () => {
return (
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
</div>
)}
});
ReactDOM.render(
<Example />,
document.getElementById('main')
);
and the transformed JS:
var Example = React.createClass({displayName: "Example",
render: function() {
return (
React.createElement("div", {class: "input-group"},
React.createElement("span", {class: "input-group-addon", id: "basic-addon1"}, "@"),
React.createElement("input", {type: "text", class: "form-control", placeholder: "Username", "aria-describedby": "basic-addon1"})
)
)}
});
ReactDOM.render(
React.createElement(Example, null),
document.getElementById('main')
);
When I copy and paste the HTML into the HTML template, everything appears as expected. When I replace Example.render with a simple <h1>Text</h1>, it also renders fine.
What could be the problem?
When we write JSX, we're still writing in JavaScript, just with some different syntax. In JavaScript 'class' is a keyword, which means we can't use 'class' unless we're actually trying to define one. So to work around this, you have to replace 'class' with 'className' as such:
var Example = React.createClass({
render: () => {
return (
<div className="input-group">
<span className="input-group-addon" id="basic-addon1">@</span>
<input type="text" className="form-control" placeholder="Username" aria-describedby="basic-addon1" />
</div>
)}
});
ReactDOM.render(
<Example />,
document.getElementById('main')
);
In your .html files, however, you wouldn't use 'className', it'd just be 'class' like you were trying to do originally.