var COLORS = ["red", "green", "yellow", "blue", "brown"];

var ColorPicker = React.createClass({
  render: function () {
    return (
      <div className="ColorPicker">
        { COLORS.map((element, index) => {
          return (
            <Color
              onColorChange={this.props.onColorChange}
              key={index}
              color={element}
            />
          );
        })}
      </div>
    );
  }
});

var Color = React.createClass({
  handleClick: function () {
    this.props.onColorChange(this.props.color);
  },
  render: function () {
    return <div
      className="Color"
      color={this.props.color}
      style={{backgroundColor: this.props.color}}
      onClick={this.handleClick}
    />;
  }
});

var Target = React.createClass({
  render: function () {
    return <div className="Target" style={{backgroundColor: this.props.color}}/>;
  }
});

var App = React.createClass({
  getInitialState: function () {
    return {
      targetColor: "white"
    }
  },

  onColorChange(color) {
    this.setState({
      targetColor: color,
    })
  },

  render: function () {
    return (
      <div>
        <Target color={this.state.targetColor}/>
        <ColorPicker onColorChange={this.onColorChange} />
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById("app"));