R: Modal Example

https://codereview.stackexchange.com/questions/141699/react-modal-visibility-and-content-toggling-based-on-action-clicked#141699

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://npmcdn.com/classnames/index.js"></script>
<div class="js-app"></div>

CSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

.light-modal {
    background: #eee;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

Babel + JSX

console.clear();

/**
 * App Component
 * Holds actions, controls modal display using the state modalVisible.
 */
var AppComponent = React.createClass({
	getInitialState() {
    	return {
        	modalVisible: false
        }
    },
	
	_onModalYesClicked() {
    	console.log('onYesClicked::contact the server');
        
        this.toggleModal();
    },
    
    _onModalNoClicked() {
    	console.log('onNoClicked:contact the server');

		this.toggleModal();
    },
    
    toggleModal({title = null, description = null} = {}) {
    	this.setState({
        	modalVisible: !this.state.modalVisible,
            title: title,
            description: description
        });
    },
    
    onCancelClicked() {
    	console.log('onCancelClicked');
            
        this.toggleModal({
        	title: 'Cancel',
        	description: 'Would you like to commit to cancelling?'
        });
    },
    
    onHoldClicked() {
    	console.log('onHoldClicked');
        
		this.toggleModal({
        	title: 'Hold',
        	description: 'Are you sure you would like to hold the order?'
        });
    },
    
    render() {
    	var modal = undefined;
        
        if(this.state.modalVisible) {
        	modal = <ModalComponent 
            	title={this.state.title}
                description={this.state.description}
            	onModalYesClicked={this._onModalYesClicked} 
                onModalNoClicked={this._onModalNoClicked}  />
        }
    
        return (
        	<div>
                <button className="btn btn-danger" onClick={this.onCancelClicked}>Cancel</button>
                <button className="btn btn-warning" onClick={this.onHoldClicked}>Hold</button>
                
                {modal}
            </div>
    	)
    }
});

/**
 * Modal Component
 * Uses props to tell parent component the action to take on action click.
 */
var ModalComponent = React.createClass({
	render() {
    	return (
        	<div className="light-modal">
               ...