React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by ccnokes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

function isDefined(val) { return val != null; }

var ToggleDisplay = React.createClass({

	propTypes: {
		hide: React.PropTypes.bool,
		show: React.PropTypes.bool
	},

	render: function() {
		var shouldHide;
        if(isDefined(this.props.show)) { 
            shouldHide = !this.props.show;
        }
        else if(isDefined(this.props.hide)) {
            shouldHide = this.props.hide;
        }
        else {
            shouldHide = false;
        }
        
		var style = {};
		
		if(shouldHide) {
			//this works
            style = {
				display: 'none'
			};
            //this does not
            //style = {
			//	display: 'none !important'
			//};
		}

		return (
			<span style={style} {...this.props} />
		);
	}

});
 
var App = React.createClass({
    
    getInitialState: function() {
        return {
            show: true
        };
    },
    
    handleClick: function() {
        this.setState({ show: !this.state.show });
    },

    render: function() {
        return (
            <div>
                <ToggleDisplay show={this.state.show}>
                    <p>Hello</p>
                </ToggleDisplay>
                <ToggleDisplay hide={this.state.show}>
                    <p>Is it me you're looking for?</p>
                </ToggleDisplay>
                <button onClick={ this.handleClick }>Toggle</button>
            </div>
        
        );
    }
});
 
React.render(<App />, document.getElementById('container'));