How to Create Modals In React-Redux

Modals dialogs are popup boxes that are components. It is a controlled component that is the secondary (child) window of the main (parent) window. Modals allow for user interaction without the interruption of the workflow of the main window. They are typically used to draw the user’s attention towards key information.

In React-Redux, Modals can be either presentational or functional. Presentational modals are generic and reusable. Functional modals are task specific and intended to perform asynchronous actions. For my group’s final project at the Flatiron School, we added modals to our application for a more user friendly browsing experience as opposed to re-routing or re-rendering a new page. We used both types of modals in our project.

We created presentational modals for two separate components. The other modal showed the original sized image of the selected art piece since our search result images were tile sized thumbnails. One presentational modal showed the detailed information about the selected art piece.

Presentational Modals

Our functional modal had a form component within the modal dialogue popup. We created a functional modal that handled the edit gallery component in which allows the user to revise their gallery’s name and description. Once the user hits the submit changes button, which is an event handler, this in turn dispatches both the edit gallery and close modal action.

Functional Modal

If you want to add modals to your own React-Redux project for user interaction, it’s easy!

First npm install react-modal within your terminal to be able to create modals in your project:

npm install --save react-modal

Then you must import Modal in the file that you want to use your modal(s) in:

Great! Now you can create modal components —

Modals have two property requirements:

  • The modal's state isOpen has to be initially set to false. Initially, the modal is closed and thus the state is false.

Example:

Example use of modal in our curate.it React-Redux application

There should be an event handler function that triggers your modal to open. The event handler is usually a on-click or a keypress. Your event handler should change the state to be true on the modal component to open the modal dialogue and render the children components. Then another event handler should change the state back to false to close the modal dialogue.

We used an on-click event handler to open our modal to show our detailed information and full sized image.

  • The content label needs to be declared as an attribute for your modal ascontentLabel = 'Modal'

Example:

For a presentational modal, encase the information that you want to be displayed on your modal between your modal:

Presentational modals are presentational components and should only read the data from the props and change data if a callback function is invoked.

Functional modals work the same as container components. The modal component must subscribe to the Redux state in order to fetch data and update state.

As shown below, our modal component has a form that allows the user to edit their gallery information. The form is attached to a handle submit that then invokes the two prop functions that are dispatched to change the data.

Example:

Component

To change data, a redux action is dispatched.

Actions
Reducers

Those are the two types of modals that you can use to help elevate your React-Redux project.

Have fun using modals!


For more information on modals: React-Redux Modal Documentation

To see examples of modals used in a React-Redux Application: curate.it

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.