Item Page Demo

by niki4810

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

/** @jsx React.DOM */

var ImageView = React.createClass({
    render : function(){
        return (
            <img alt="300x200" src={this.props.source}/>
        );
    }
});

var ColourPalletView = React.createClass({
    render : function(){
        return (
                <div className="caption">                     
                    <p>
                        <div className="label label-primary" 
                              data-id="color"
                              onMouseOver={this.props.onMouseOver}>Color Image</div>                        
                        <div 
                            className="label label-primary" data-id="black"
                            onMouseOver={this.props.onMouseOver}>Black and White Image</div>                        
                    </p>
                </div>
        );
    }
});
 
var ContainerView = React.createClass({
    getInitialState : function(){
        return {
            source : "http://placekitten.com/g/800/600"
        };
    },
    handleOnMouseOver : function(e){
        var name = event.target.getAttribute('data-id');
        if(name === "color"){
            this.setState({source : "http://placekitten.com/g/900/600" });
        }else{
            this.setState({source : "http://placekitten.com/g/800/600"});
        }
    },
    render : function(){
        var source = this.state.source;
        return (
            <div className="thumbnail">
                <ImageView source={source}/>
                <ColourPalletView onMouseOver={this.handleOnMouseOver}/>
            </div>
        );
    }
});
React.renderComponent(<ContainerView  />, document.getElementById('container'));