A Pen by Mr2P

Thumbnail
This awesome code was written by Mr2P, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Mr2P ©
  • HTML
  • CSS
  • JavaScript
    <div id="app"></div>

/*Downloaded from https://www.codeseek.co/Mr2P/a-pen-by-mr2p-bpwLZg */
    


/*Downloaded from https://www.codeseek.co/Mr2P/a-pen-by-mr2p-bpwLZg */
    var App = React.createClass({
  getInitialState: function () {
    return {
      bgColor: "teal"
    };
  },
  handleColorChange: function (color) {
    this.setState({bgColor: color});    
  },
  updateBackgroundColor: function () {
    var body = document.querySelector('body');
    body.style.background = this.state.bgColor;
  },
  componentDidMount: function () {
    this.updateBackgroundColor();
  },
  componentDidUpdate: function () {
    this.updateBackgroundColor();
  },
  render: function() {
    return (
      <div>
        <Header title="Hello React" />
        <label>Choose bg:
        <ColorPicker value={this.state.bgColor} onColorChange={this.handleColorChange} />
        </label>
      </div>
    )
  }
});

var Header = React.createClass({
  render: function () {
    return (
      <h1 className="page-title">{this.props.title}</h1>
    )
  }
});

var ColorPicker = React.createClass({
  propTypes: {
    value: React.PropTypes.string.isRequired,
    onColorChange: React.PropTypes.func
  },
  handleChange: function (e) {
    e.preventDefault();
    var color = e.target.value;
    if (this.props.onColorChange) {      
      this.props.onColorChange(color);
    }
  },
  render: function () {
    return (
      <select value={this.props.value} onChange={this.handleChange}>
        <option value="orangered">orangered</option>
        <option value="teal">teal</option>
        <option value="orange">orange</option>
        <option value="indigo">indigo</option>
        <option value="red">red</option>
      </select>
    )
  }
});

React.render(<App/>, document.querySelector('#app'));




Comments