JSFiddle - React, Tailwind, and code Playground

by insin

CSS

.box {
    width: 50px;
    height: 50px;
    background-color: black;
}

.selected {
    opacity: 1;
}

.unselected {
    opacity: 0.5;
}

JavaScript

/**
 * A tidied-up version of the end state of this React tutorial:
 * http://codegeekz.com/react-js-tutorial/
 */

var App = React.createClass({
  onBoxSelected: function(boxData) {
    alert(boxData.color)
  },

  render: function() {
    var boxes = this.props.boxData.map(function(boxData) {
      return Box({data: boxData, onSelect: this.onBoxSelected})
    }.bind(this))
    return React.DOM.div({className: 'root'}, boxes)
  }
})

var Box = React.createClass({
  getInitialState: function() {
    return {selected: false}
  },

  onClick: function() {
    this.setState({selected: !this.state.selected}, function() {
      if (this.state.selected && this.props.onSelect) {
        this.props.onSelect(this.props.data)
      }
    })
  },

  render: function() {
    return React.DOM.div({
      className: 'box ' + (this.state.selected ? 'selected' : 'unselected'),
      onClick: this.onClick,
      style: {backgroundColor: this.props.data.value}
    }, this.props.data.color)
  }
})

React.renderComponent(App({boxData: [
  {color: "red", value: "#f00"},
  {color: "green", value: "#0f0"},
  {color: "blue", value: "#00f"},
  {color: "cyan", value: "#0ff"},
  {color: "magenta", value: "#f0f"},
  {color: "yellow", value: "#ff0"},
  {color: "black", value: "#000"}
]}), document.body)