Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<title>React</title>
<!-- CE polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/0.2.1/document-register-element.js"></script>
<!-- custom element: hello-el -->
<script src="http://jsbin.com/kafumo/2.js"></script>
<link rel="stylesheet" href="http://jsbin.com/kafumo.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script type="text/jsx">
var DemoApp = React.createClass({
    getInitialState: function() {
        return {
            items: [
                'Paul',
                'Ben'
            ]
        };
    },
    changeValues: function() {
        var newItems = this.state.items.map(function(item) {
            return Math.floor(Math.random() * 100);
        });
        this.setState({items: newItems});
    },
    render: function() {
        var ceList = this.state.items.map(function(item) {
            return <hello-el data-text={item}></hello-el>;
        });
        
        var liList = this.state.items.map(function(item) {
            return <li>{item}</li>;
        });
        
        return (
            <div>
                <h1>React</h1>
                
                <h2>Custom Elements</h2>
                {ceList}
                
                <h2>Plain List</h2>
                <ul>{liList}</ul>
                
                <button onClick={this.changeValues}>Change Values</button>
            </div>
        );
    }
});
React.render(<DemoApp/> , document.body);
</script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x