JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/**
* @jsx React.DOM
*/

var Svg = React.createClass({

    update: function () {
        this.setState({
            icon: '<svg><g></g></svg>'
        });
    },

    getInitialState: function () {
    
        return {
            icon: '<svg><path d="M116,96c-11,0-20,9-20,20v376c0,11,9,20,20,20h280c11,0,20-9,20-20V116c0-11-9-20-20-20H116z M384,454.182c0,11-9,20-20,20 H148c-11,0-20-9-20-20V153.818c0-11,9-20,20-20h216c11,0,20,9,20,20V454.182z"/> <path d="M384,52c0-11-9-20-20-20H148c-11,0-20,9-20,20v56c0,11,9,20,20,20h216c11,0,20-9,20-20V52z"/> <g> <path d="M352,396c0,11-9,20-20,20H180c-11,0-20-9-20-20v-56c0-11,9-20,20-20h152c11,0,20,9,20,20V396z" /></svg>'
        };

    },
    
    
    render: function () {
        return (
            <div>
                <button onClick={this.update}>Update</button>
                <div dangerouslySetInnerHTML={{__html: this.state.icon}}></div>
            </div>
        );
    }
});

React.renderComponent(<Svg />, document.body);