So instead, what I'd like to do in this guide is create a link that has a click listener and then, when we click on that link, it will then open up the modal. We're not gonna worry about closing it, or submitting anything, or anything like that yet. All I care about is passing props directly to the modal to let it know when it should open up.

So, let's get started with that. I'm going to open up the blog-modal first and this is only gonna require one change. We're going to call this.props and then the name of whatever that prop is, so in this case, I'm just gonna say modalIsOpen and this is something we've not created yet, but we're going to create this inside of our blog file.

blog-modal.js

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

So, let's open up that component because this is going to have a little bit more code that we have to add. The first thing we need to do is, our blog component needs to know the state of the blog. It needs to know, is it open or is it closed? And so, the best way of doing that is inside of its local state.

We're gonna add a new attribute here and I'm just going to call this attribute blogModalIsOpen and by default, we're gonna set it to false, because when the page loads, we do not wanna have the blog modal automatically showing up. It should only show up when a user has clicked on it.

So, now that we have that, let's go and let's see how we can update this state. I'm moving a little bit faster and hopefully, that's okay, because we've followed this pattern a number of times throughout this course. We are having two components that are talking to each other.

We have a parent component that is updating a value in a child component and we're building out a click listener and functions to handle those events, and so, that's what we're gonna do here is, we're going to add an ability to listen for whenever a user clicks on that link and we'll bind it to this component first.

So, let's just say this. and I'm gonna call this handleNewBlogClick and then let's just bind that to this, so this.handleNewBlogClick.bind and pass in this and now that we have that, we can take that method name and we're going to just create a function here.

blog.js

  this.getBlogItems = this.getBlogItems.bind(this);
  this.onScroll = this.onScroll.bind(this);
  window.addEventListener("scroll", this.onScroll, false);
  this.handleNewBlogClick = this.handleNewBlogClick.bind(this);
}

handleNewBlogClick() {

}

Now, think about what this function needs to do. Whenever a user navigates to the page and they click yes, I wanna create a new blog post, this should simply update the state of the blog component. Specifically, it should update the blogModalIsOpen and it should change it to true, so let's do that here. I'm gonna say this.setState, and inside of setState, let's say blogModalIsOpen and we will set that to true.

handleNewBlogClick() {
  this.setState({
    blogModalIsOpen: true
  });
}

Now that we have all of this, we need to pass in this function, or I should say the result of this function, which is updating the state into our new blog modal. If you scroll all the way down to where we're calling the BlogModal component, I'm going to pass in our first prop and if you do not remember the name, the name that we're gonna use is modalIsOpen.

That's why we're calling this.props.modalIsOpen and you could call this anything that you want, but I think that this is a name that makes sense. So, I'm gonna say modalIsOpen and we'll set this equal to the state of this.state, and then blogModalIsOpen.

return (
  <div className="blog-container">
    <BlogModal modalIsOpen={this.state.blogModalIsOpen} />
    <div className="content-container">{blogRecords}</div>

So, in case this is a little fuzzy or if I've been moving a little bit faster here, we will review it at the very end. Just know that we're passing in the data and this is gonna be a dynamic value that, when the component first loads, this is gonna be false, so this should not have a modal open when we load the page and we can test this out right now, even before we add our links.

So, let's come and test this. If you open up Chrome, you can hit refresh and you'll see the modal's no longer appearing and that's because we are telling it that that value is false, that we do not want the blog modal open yet.

Now that we know that that's working, let's now add our link. I'm going to give ourselves a few lines of JSX right here and let's wrap it up in a div, just because I know, at some point, we are going to need to style this, so here I'm just gonna say div, give it a className of new-blog-link and then inside of this div, this is where our a tag, our link tag, is gonna be.

So, a and then we're gonna add an onClick handler and this onClick handler is going to take in the function for our click. I'm gonna say this. and it's handleNewBlogClick, and that's all we need to put there for the a tag and then, just put whatever text you want, you can just say open modal.

It doesn't really matter, because when we style this, we're going to be making this an icon. There's not gonna be any text at all, so for right now, that should be all that we need.

return (
  <div className="blog-container">
    <BlogModal modalIsOpen={this.state.blogModalIsOpen} />

    <div className="new-blog-link">
      <a onClick={this.handleNewBlogClick}>Open Modal!</a>
    </div>
)

If you hit save, let's now open Google Chrome up and you can see, we have this open modal text here at the very top. If you click on it, our modal opens up, so everything there is now wired up.

Let's work through this or review it, just so it really solidifies in our mind exactly what we did. The very first thing we did is, we changed the value of isOpen to the ReactModal component. We changed that to be a dynamic value, so it's no longer hardcoded.

We're saying that whatever the parent state, so whatever passes in the property of modalIsOpen, if it is true, then it's gonna be open. If it's false, it's not going to be open, that's all we changed for the modal. Then, inside of the blog component itself, we updated and we added a base state to say that, whenever this component first loads up, we want the modal to be closed, that's why we said blogModalIsOpen is set to false.

From there, we created a handler for our click listener that, whenever it's fired, so whenever a user clicks on that link, it is going to automatically update the state of blogModalIsOpen to true, which is gonna be passed down into the BlogModal component and then, from there, we simply added the prop, so we added that prop to BlogModal, that's what wired the two components up together, and then, from there, we added our click listener onto the link.

So, hopefully that entire process is starting to make a little bit more sense, because I will tell you this. From a React perspective, whenever you're learning about React, that is going to be one of the most critical ideas to really understand, so I hope that did make sense.

If it didn't, go through it again, practice it a few times, and then it will start to make sense. In the next guide, we're gonna walk through how we can close the modal.

Resources

• Source code