ninjaintrouble ninjaintrouble - 11 days ago 6
React JSX Question

Why doesn't this react element render?



import React from 'react';
import {Alert} from 'react-bootstrap';


var App = React.createClass({
render() {
return React.createElement('Alert',{bsStyle: 'danger'},'this alert doesn\'t work');
}
});

module.exports = App;





I render this component in the dom in another component. Its works fine with a non bootstrap element like this for instance:



import React from 'react';
import {Alert} from 'react-bootstrap';
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);


var App = React.createClass({
render() {
return element;
}
});

module.exports = App;




Answer

React.createElement in your case must accept a reference to the react component, not its name (which would never work, since it is only for built-in components).

So it should be

React.createElement(Alert, ...

References:

Comments