ReactJS: Change Color Simple Component

This entry is part 33 of 35 in the series React JS

See the Pen React simple component by daryl (@darylw) on CodePen.

var green = '#39D1B4';
var yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      color: green
    }
    
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor() {
    let newColor = (this.state.color == green ? yellow : green);
    this.setState({ color: newColor });
  }
  
  render() {
    return (
      <div className="btn-block" style={{background: this.state.color}}>
        <h1 >
          Change my color
        </h1>
        <button className="btn" onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }  
}

ReactDOM.render(<Toggle />, document.getElementById('app'));