How to make a modal with ReactJs
Published: 2023-04-06 00:00:00

---
title: 'How to make a modal with ReactJs'
date: '2023-04-06'
published: true
---

Modals come in handy when you want to notify the user of an important action that was performed successfully or not or when your quickly want to pass an information to your user as soon as they open your app. For example in an ecommerce app, when the user has hitted the complete order or checkout button, you may want to confirm the user's intention to proceed with the order by simply showing a modal requiring the user to either click the __continue__ or __cancel__ button. After completing the order, it is a common practice to also display a form of notification box to inform the user that the order was successfully placed.

There are other many use cases of modal, in fact there are cases that a login form in a modal is pop out for the user to login with.

In this tutorial, we will be making a modal with React `useState` and `css`.
The main purpose of this tutorial is to demonstrate to the reader how a modal can be made using the techniques stated above.
Understanding of the content of this article will enable the reader to be able to deploy the techniques in any way that suits his/her need.

In case you are starting from scratch, run any of the commands below to create react app or any equivalent command depending on your device and tool your are using.
Run the command in the folder you want to create the app.

```
yarn create react-app name_of_your_app
```

```
npx create-react-app name_of_your_app
```

In the __src__ folder of the created app, I will a create folder called __components__. Then inside this folder I will make a
file and name it `ModalPage.js`. This file will contain two React components as follows

The first component is the `Modal`. This component will accept two props as defined below:

- `isModalOpen`: This is a react state that signifies if the modal is opened or not. It is of Boolean type that is, it is either `true` or `false`. When it is `true`, it implies the modal is opened while being `false` implies the modal is closed.

- `closeModal`: This is a function to close the modal. Hence this function will set the `isModalOpen` state value to `false`.

```js
const Modal = ({isModalOpen, closeModal}) => {
  return (
    <div className={`${isModalOpen? 'modal open' : 'modal'}`}>
        <div className='modal-content'>
            <p>Modal opened click the close button below to close modal</p>
            <button className='btn close-modal' onClick={closeModal}>close modal</button>
        </div>
    </div>
  )
}
```

Note, that the className of the `Modal` component is conditionally set to be either `modal` or `modal open` depending on the value of `isModalOpen` using a ternary operator. When the value of `isModalOpen` is `false` the className of the `Modal` component will be `modal` while when its value is `true` the `className` of the `Modal` component will be `modal open` indicating the `Modal` is opened as explained above.
Also, there is a button inside the `Modal` which when clicked sets the the value of `isModalOpen` to `false` thereby closing the `Modal`. This is achieved by attaching an `onClick` event listener to button such that when it is clicked, the function `closeModal` is called and hence the value of the `isModalOpen` is set to `false` thereby closing the `Modal`.

The second component is the `ModalPage` described below.

In this component we define a state variable `isModalOpen` and corresponding function, `setIsModalOpen` to toggle its value using the React `useState` hook. `isModalOpen` is passed as prop to the `Modal` component.

Two functions are defined:

- `closeModal`: This function is used to set the value of `isModalOpen` to `false`, thereby closing the `Modal`. This function is passed as prop value to the `Modal` component.

- `openModal`: This function is used to set the value of `isModalOpen` to `true` thereby opening the `Modal`. The function is attached to a button in this component through `onClick` event. Hence, whenever the button is clicked, the value of `isModalOpen` is set to `true` and thereby opening the `Modal`

```js
const ModalPage = () => {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const closeModal = () => {
        setIsModalOpen(false)
    }
    const openModal = () => {
        setIsModalOpen(true)
    }
    return (
        <>
            <Modal closeModal={closeModal} isModalOpen={isModalOpen} />
            <main>
                <section className='page-element'>
                    <h1>Page content</h1>
                    <button className='btn open-modal' onClick={openModal}>open modal</button>
                </section>
            </main>
        </>
    )
}

export default ModalPage
```

__Note__: In case your `Modal` and `ModalPage` components are not in the same file, ensure you import the `Modal` component into the file containing the `ModalPage` component. Also, you can name your components whatever you like as long as they conform to React components naming convention.

Then write the following css inside your index.css located in the source folder of your react app.

```css
.btn {
  cursor: pointer;
  border: none;
  padding: .5rem;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  display: none;
}

.modal.open {
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, .5);
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 300px;
  padding: 1rem;
  background-color: #ffffff;
}

.close-modal {
  background-color: #d11a2a;
  color: #ffffff;
}
```


And in the `App.js` located in `src` folder of the created app, import the `ModalPage` component.

```js
import ModalPage from './components/ModalPage';
function App() {
  return (
    <div>
      <ModalPage />
    </div>
  );
}

export default App;
```
Now, let's relate our `css` with our `Modal` component. Note the `Modal` can have its class to be either `modal` when the value of `isModalOpen` is `false` or `modal open` when the value of `isModalOpen` is true. This is where the logic lies. In the `css` file, element with class `modal` is given `display` property of `none`, that is not to display while element with class `modal open` is given `display` property of `grid`. Hence as the value of `isModalOpen` toggles between `false` and `true`, the `Modal` is removed and added back to the `DOM` appropriately.

Then render your App in the `index.js` located in the `src` folder of the created app

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```
Note, there are things you can change here, such as the styling of your modal content, where your declare the variables and function used and also the background color of the `Modal`. The most important information is understanding the technique used here.

Yes that is it with creating modal in ReactJS. Kindly put your questions or observations in the comment box below, I will be really grateful if I can use your insights to improve my work.

If you love my work and want to support me, you can buy me a coffee [here](https://www.buymeacoffee.com/adegbiteismail). No amount is small. Thank you and watch out for my coming articles