SO41667346

by mrlew

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<div id="app"></div>

Babel + JSX

class Button extends React.Component {
	render() {
  
    let btnStyle = {
    	backgroundColor: (this.props.active ? "#ff0000" : "#00ff00")
    };
    
  
  	return <button style={btnStyle} disabled={!this.props.active}>{this.props.children}</button>
  }

}

class Wrapper extends React.Component {

	constructor(props) {
  	super(props);
    this.state = { view: 'default' };
  }
  
  onChangeView(e) {
  	this.setState({view: e.target.value});
  }

	render() {
    
    let btnAttributes = {}
    btnAttributes['active'] = (this.state.view === 'default' ? 'active' : null) 
    
  	return (
    <div>
    
  	  <Button active={this.state.view === 'default'}>My button (view: {this.state.view})</Button>
      
      <div>
        <label>Select button view: </label>
        <select onChange={this.onChangeView.bind(this)}>
          <option value="default">default</option>
          <option value="other">other</option>
        </select>       
      </div>
  	</div>
    )
  }

}



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