Reusable Modal Architecture For Large-Scale React Applications - Part 5

Reusable modal snapshot

TL;DR UI engineering is a lucrative career if you're highly skilled. But it's very challenging, and you need to know what you're doing. In this tutorial series, you will learn how to architect a highly reusable, scalable and customizable Modal component for a large-scale application developed with React, Redux & React-Bootstrap. Modals are a very important UI element for almost every application, so architect them right!

This tutorial series is React 17 ready. See this post on React's soon to be deprecated lifecycle hooks.


The ModalBody Component

When you display a Modal to users, you either want to alert them to something or you want to allow them to do something. In one view, a Modal may display a form so a user can set or retrieve data. In another view, a Modal is displayed to alert a user that he’s about to perform a destructive action.

So each unique Modal must contain customized content to display. Without that content there’s no point in displaying a Modal.

So that leads us to the ModalBody sub-component of our general architecture (full code here).

The Render Method

In the render() method of the ModalBody component, we’re going to simply wrap and render React Bootstrap’s <ReactBootstrapModal.Body> component and pass in the children.

import { Modal as ReactBootstrapModal } from 'react-bootstrap'

...

render() {
  const { children } = this.props

  return (
    <div className={styles}>
      <ReactBootstrapModal.Body>
        {children}
      </ReactBootstrapModal.Body>
    </div>
  )
}

...

ModalBody.propTypes = {
  children: PropTypes.node.isRequired
}

...

Make a note that we’re making the children prop required in the PropTypes. Like I said, if we’re displaying a Modal there has to be something in it so the children prop is mandatory.

That’s it for this sub-component. It’s very simple.

Next Steps

Next, let’s review the code for the ModalFooter, the final sub-component in our Modal architecture.

Next Steps - The ModalFooter Component.





Learn How To Develop Professional React Apps

Professional React App brand image

React, Redux & Webpack are HOT HOT skills that are IN DEMAND.

Do you have what it takes to be a professional developer?

Learn from an industry expert and start building professional React apps for clients, employers, or your own startup.


UPGRADE YOUR SKILLS