But before we do that, I wanna take care of a warning that we're seeing in the console here and let's go take a look at this. If you open up the JavaScript console, and you click on Open Modal, you'll see this ugly little warning.

So let's read about it and see how we can fix that. So it says warning, react-modal, app element is not defined. Please use Modal.setAppElement with element as an argument or set appElement equals element, which this means either set this directly in the code itself or to set it and pass in a prop.

So we can use either option, and it says this is needed so screen readers don't see main content when the modal is opened. It's not recommended but you can opt out by setting ariaHide false.

So this deals with accessibility, so if someone is accessing your site and they go and they open up this modal, it's someone who perhaps is blind or they are using a screen reader is going to have some confusing behavior.

What we want is when that occurs, the screen reader ignores what is behind the modal and instead it simply looks at the content of the modal itself.

So that's what we're going to fix in this guide, it'll be very short it is only gonna require a single line of code and it's pretty much the code that was already placed inside of that warning.

So if you go to blog-modal you can do this right above the class definition, so this does not have to deal with behavior or anything like that, we're simply gonna call ReactModal so this is the actual library, we're gonna call ReactModal, setAppElement. You see that we have some nice auto complete there for us.

And then from there, we're gonna pass in the name of that element so the way that you figure this out is this is the wrapper, this is the class name for the entire application. So if you open up index.html, you can see that we have a class for the entire application called app-wrapper and that's what it's looking for.

So you do setAppElement. because this is actually looking this query up. So we can't just pass in the name, we have to say that this is a class and the reason for that is because it needs to know if it's a class or if there was the hashtag symbol in front of it, it would be looking for an ID, so that's why that needs to be placed there.

And just hit save and now let's go test it out and see if this fixed it. Open up Google Chrome, hit refresh, and now let's open up the JavaScript console and you can see that that warning is no longer there. So we have taken care of it and we've ensured that our modal will work properly even with screen readers.

So great job. In the next guide, we're gonna start building out our blog form component.

Resources

• Source code