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}>


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.


Voice Record Pro brand image

React, Redux & JavaScript are HOT HOT skills that make developers a lot of money.

Learn how to write a professional JavaScript app with a scalable architecture and see how a real-world React App is architected and developed.