React Equivalent of ng-if
Code sample to demonstrating the equivalent of an Angular's ng-if directive in React.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="if-demo"></div>
<div id="switch-demo"></div>
<div id="iife-demo"></div>
JavaScript 1.7
var IfDemoComponent = React.createClass({
render: function() {
var el = null;
if (this.props.showMe) {
el = (
<div>
I am only included in the DOM if this.props.showMe evaluates to true.
</div>
);
}
return el ; // ksadfkjskadfkjh kasdfhksdjhf ksajdhfk jshdf
}
});
ReactDOM.render(<IfDemoComponent showMe={true} />, document.getElementById('if-demo'));
var SwitchDemoComponent = React.createClass({
render: function() {
var el = null;
switch(this.props.showMe) {
case 1:
el = (<div>One</div>);
break;
case 2:
el = (<div>Two</div>);
break;
case 3:
el = (<div>Three</div>);
break;
}
return el;
}
});
ReactDOM.render(<SwitchDemoComponent showMe={2} />, document.getElementById('switch-demo'));
var IIFEDemoComponent = React.createClass({
render: function() {
return (
<div>
{(function(showMe) {
if (showMe) {
return (<div>IIFE's are cool</div>);
}
})(this.props.showMe)}
</div>
);
}
});
ReactDOM.render(<IIFEDemoComponent showMe={true} />, document.getElementById('iife-demo'));