Create a modal with React!
Tags: html, css, react, tutorial
Published: 2021-11-06 13:11:42

Hey **fellow creators**,

Let's create an awesome *modal* with React! 

If you prefer to watch the video **version**, it's right here :

{%youtube 9DwGahSqcEc%}

[Here's the source code for you](https://github.com/Ziratsu/React-modal-yt).

Let's start building!

##1. Create your component.
In the Modal.js file, create a component that'll use *useState.*
Add a const with modal and setModal, making sure the state is false to begin with, so that the modal doesn't show upon opening the website.
```react
import React, { useState } from "react";
import "./Modal.css";

export default function Modal() {
  const [modal, setModal] = useState(false);

  return (
        <>
    
	</>
	);
}
```

##2. Create a button that'll trigger the pop-up.
Add a button inside of the return, with an onClick parameter that'll trigger the function we'll create in a second.
```react
return (
    <>
	    <button onClick={toggleModal} className="btn-modal">
        Open
      </button>
		</>
	);
``` 

Here's the function: when you click on the button, it'll change the state from false to true or the other way around.
```react
const toggleModal = () => {
    setModal(!modal);
  };
``` 

##3. Create the modal.
Create the content of your modal with the appropriate classnames for your css and make sure not to forget to add the onClick functions that'll trigger the opening or closing of your modal.
```react
<div className="modal">
	<div onClick={toggleModal} className="overlay"></div>
   <div className="modal-content">
    <h2>Hello Modal</h2>
     <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
              perferendis suscipit officia recusandae, eveniet quaerat assumenda
              id fugit, dignissimos maxime non natus placeat illo iusto!
              Sapiente dolorum id maiores dolores? Illum pariatur possimus
              quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
              placeat tempora vitae enim incidunt porro fuga ea.
    </p>
	  <button className="close-modal" onClick={toggleModal}>
     CLOSE
	   </button>
	 </div>
</div>
``` 

##4. Render the modal conditionally.
Add the curly brackets and your condition so that the modal only shows if the state is true (that is, if you've clicked on the "open" button).
```react
{modal && (
        <div className="modal">
          <div onClick={toggleModal} className="overlay"></div>
          <div className="modal-content">
            <h2>Hello Modal</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
              perferendis suscipit officia recusandae, eveniet quaerat assumenda
              id fugit, dignissimos maxime non natus placeat illo iusto!
              Sapiente dolorum id maiores dolores? Illum pariatur possimus
              quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
              placeat tempora vitae enim incidunt porro fuga ea.
            </p>
            <button className="close-modal" onClick={toggleModal}>
              CLOSE
            </button>
          </div>
        </div>
      )}
``` 

Now as you can see, there are two ways for you to close the modal:
- either by clicking on the close button of course.
- or by clicking on the overlay.

One last thing! Imagine there's a text below your "open" button. For a better user experience, you don't want this long paragraph to scroll down when the modal is open. To prevent that, you need to add a condition so that if the modal is opened, then the scrolling will not be possible:

```css
body.active-modal {
    overflow-y: hidden;
}
```
```react
if(modal) {
    document.body.classList.add('active-modal')
  } else {
    document.body.classList.remove('active-modal')
  }
``` 

Try with [the full code](https://github.com/Ziratsu/React-modal-yt) and you'll see by yourself that it's now fixed! Make sure to check out the CSS file as well. 

Have fun experimenting and make sure to check out *my other tutorials*!

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.