My goal for this guide is to be able to call the modal, we're not gonna connect it up to a button or anything like that, I just wanna make sure it's working first. And so my goal is by the end of this guide, when I refresh this page, a modal will pop up automatically. And then in the next few guides, we'll see how we can have our button open it and how we can close it by clicking out, and different things like that.

So for right now, let's just build out the process to have the modal there. I'm gonna open up the file system and inside of our components directory, I'm gonna create a new directory here, just called modals, and the reason for that is because if I ever wanna have any other modals, I'll know exactly where those files are.

And I'll create a new file here called blog-modal.js, and this is gonna be a class component, the reason why it's gonna be a class component is because it's gonna have to maintain its own state. So we'll create that, I'm gonna import React and Component from react.

I could also use my snippet, my user snippets automatically do this for us, but it is sometimes good practice to just write everything out by hand. So I'm going to say export default class BlogModal and this is going to extend or extends the Component.

And now inside of here, we're just gonna have a basic constructor, this is going to take in props and then it's going to call super. We're not gonna set our state yet, we'll do that in one of the future guides, and then remember all class components need to have a render function, and then inside of here we simply need to return some code.

So let's start off for right now, we're gonna be returning the ReactModal. Now we need to import that at the very top, so I'll say import ReactModal from react-modal, and now we can actually call this. So I'll say ReactModal, and now ReactModal takes a number of props and you'll see that the props that we pass it are how we can customize the modal. So we're only gonna use one of them in this guide and that is gonna be isOpen, and let's set it equal to true.

Now in future guides, we're going to have a button that allows us to click on it and then it's going to manage this state change, but for right now let's just hard code it in there to make sure it's working. Make sure you close this off, this is not a self-closing tag because the way ReactModal works is it has a setup where it gets the data, all the content that goes in the modal gets passed in as a child component.

So whenever we're using child components, we do not use self-closing tags. We call ReactModal or whatever the component name is, and then we have a closing tag. So for right now, let's just put an h1 tag in here and we can just say I'm in a modal! Okay, this should be all that we need to get this working and because we hardcoded isOpen, this means that when we call this from any component, the modal should just be opened.

blog-modal.js

import React, { Component } from "react";
import ReactModal from "react-modal";

export default class BlogModal extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ReactModal isOpen={true}>
        <h1>I'm in a modal!</h1>
      </ReactModal>
    );
  }
}

So let's open this up and test it out, at the very bottom right below import BlogItem, and I'm in the blog component, I'm gonna say import BlogModal from, and we wanna jump back one directory, go into our new modals directory, and then blog-modal, and now we can call this, and we're not gonna pass any props to it or anything like that for right now.

blog.js

import React, { Component } from "react";
import { Link } from "react-router-dom";;
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import axios from "axios";
import BlogItem from "../blog/blog-item";
import BlogModal from "../modals/blog-modal";

You can call this anywhere within the div that is getting returned. So it's not actually being placed on the DOM directly or even on the virtual DOM, it's simply a component that's being passed in and its visibility does not exist until isOpen is true, just like we can see right here.

So technically your modal could be placed anywhere, I could put it here at the top, I could put it here at the bottom, it really doesn't matter. So here I'm just gonna put it at the top, I always do that just because that way, I can just look and see anytime I have modals on the page, I'll know to look up at the very top of the JSX code.

return (
  <div className="blog-container">
    <BlogModal />
    <div className="content-container">{blogRecords}</div>

So I'm gonna hit save and now we should see our modal, so let's go test this out. And look at that, it says I'm in a modal!

Now, you're going to see that the ReactModal, when I've mentioned this before, the ReactModal is very much a lightweight modal library. There are libraries out there that give you all kinds of pre-configured system settings and those can be a little bit difficult to customize.

ReactModal, on the other hand, does not give you any of the features out of the box, you have to customize everything, even to the point, if you try to click anywhere outside, the expected behavior is that that would clear off the modal. But in this case, it won't actually do that. We have to tell it when we want that process to occur, and so we're gonna have a few guides dedicated to customizing this.

The very first thing that we're going to do in the next guide is to be able to have our button so we can click and open up this modal.

Resources

• Source code