Using Modals

To use modals in our application, first import the modal and the component you would like displayed as a modal:

import { closeModal, openModal } from '../actions';
import BigImage from  './BigImage';

Add the following actions to the mapDispatchToProps function for the parent component:

const mapDispatchToProps = dispatch => {
  return {
    openModal: (
      <button onClick={() => dispatch(openModal(<BigImage />))}>
        Big Image
      </button>
    ),
    closeModal: () => dispatch(closeModal())
  };
};

Important: the openModal action has to return an html / react element and the openModal argument needs to be a component

To close the modal, add the following code (in this case the modal can also be closed clicking on an "X"):

<div onClick={this.props.closeModal} className="close-x">X</div>

The closeModal action can also be used when submitting forms:

handleSubmit(e) {
    e.preventDefault();
    this.props.processForm(user).then(this.props.closeModal);
  }