Allowing state to be set by child

Modal.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 {
  constructor(props) {
    super(props);

    // state can be passed UP from the modal's content
    // this is the equivalent of defaultProps
    this.state = {
      title: '',
      showOk: true,
      okText: 'OK',
      okDisabled: false,
      width: 400,
      onOk: () => {}
    };
  }
  
  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}>{this.state.title}</h1>

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

          <div style={styles.body}>
            <ModalBody
              {...this.props}
              setModalState={state => this.setState(state)}
            />
          </div>

          <div style={styles.actions}>
            <button
              onClick={this.state.onOk}
            >{this.state.okText}</button>
          </div>
        </div>
      </div>
    );
  }
}

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

export default Modal;