ModalSimple.jsx

import React from 'react';
const {Component, PropTypes} = React;

import SignInModalBody from './SignInModalBody.jsx';
import EditScreenModalBody from './EditScreenModalBody.jsx';
import FeedbackModalBody from './FeedbackModalBody.jsx';
import HelpPanelModalBody from './HelpPanelModalBody.jsx';
import styles from './styles.js';

class Modal extends Component {
  render() {
    let ModalBody;

    switch (this.props.currentModal) {
      case 'signIn' :
        ModalBody = SignInModalBody;
        break;

      case 'editScreen' :
        ModalBody = EditScreenModalBody;
        break;

      case 'feedback' :
        ModalBody = FeedbackModalBody;
        break;

      case 'helpPanel' :
        ModalBody = HelpPanelModalBody;
        break;

      default :
        return null; // no known modal, don't render anything
    }

    return (
      <div style={styles.back}>
        <div style={styles.panel}>
          <div style={styles.header}>
            <h1 style={styles.title}>The Modal Title</h1>

            <button style={styles.close}>Close</button>
          </div>

          <div style={styles.body}>
            <ModalBody {...this.props}/>
          </div>

          <div style={styles.actions}>
            <button>OK</button>
          </div>
        </div>
      </div>
    );
  }
}

Modal.propTypes = {
  currentModal: PropTypes.string.isRequired,
  hideModal: PropTypes.func.isRequired,
};

export default Modal;