Building a modal in React.
Tags: javascript, react
Published: 2018-09-16 20:22:29

---
title: Building a modal in React.
published: true
description: 
tags: javascript, react
---
In this tutorial, we are going to build a modal in React. Below is a demo of it.

![](https://res.cloudinary.com/achowba/image/upload/v1537016409/Articles/react-modal/react-modal-demo.gif)

### Prerequisites

These are the prerequisites required to follow this tutorial.

-   Knowledge of [React](https://reactjs.org/) (You should have at least a basic understanding of state and props).
    
-   An installation of [Node JS](https://nodejs.org/en/) on your PC.
    
-   [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html) installed on your PC.
    

### Initial Setup

Initialize the project by running the command below in the root directory of your project, it installs the libraries and tools needed to start the project.

```powershell
create-react-app basic-modal
```

### Building the Components

Before creating the components or writing any code, follow the steps below to delete unwanted files and also create the files needed for the project.

1.  Delete the following files: *__app.css, app.test.js, logo.svg and registerServiceWorker.js__* from the *__src__* folder.
    
2.  Create a folder in the *__src__* directory and name it *__components__*.
    
3.  In the *__components__* folder, create another folder called *__Modal__*.
    
4.  In the *__Modal__* folder, create two files namely *__Modal.js__* and *__Modal.css__*.
    

After doing this, your project structure should be similar to this:

![](https://res.cloudinary.com/achowba/image/upload/v1537017253/Articles/react-modal/folder-structure.png)

##### Modal.js

Open the Modal.js file in the components folder and add the following code.

```javascript
import React from 'react';

import './Modal.css';

const modal = (props) => {
    return (
        <div>
            <div className="modal-wrapper"
                style={{
                    transform: props.show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: props.show ? '1' : '0'
                }}>
                <div className="modal-header">
                    <h3>Modal Header</h3>
                    <span className="close-modal-btn" onClick={props.close}>×</span>
                </div>
                <div className="modal-body">
                    <p>
                        {props.children}
                    </p>
                </div>
                <div className="modal-footer">
                    <button className="btn-cancel" onClick={props.close}>CLOSE</button>
                    <button className="btn-continue">CONTINUE</button>
                </div>
            </div>
        </div>
    )
}

export default modal;


```

The modal component has three [props](https://reactjs.org/docs/components-and-props.html) which are:

-   show - a boolean value indicating whether the modal should be shown or not.
    
-   close - a function which closes the modal when the cancel button is clicked
    
-   children - which is passed between the opening and closing tags of the modal component as the contents of the modal.
    

The modal component is a functional component that receives the contents of the modal as the children of the component. The modal footer also contains a button that executes a function to close the modal when it is clicked. The function is passed as a prop to the modal component. The inline style in the **modal-wrapper** div contains a conditional statement that sets the value of visibility status of the modal depending on the boolean value of the show props.

##### Modal.css

Add the following code to the Modal.css file in order to add styling to the modal component.

```css
.modal-wrapper {
    background: white;
    border: 1px solid #d0cccc;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
    margin: 100px auto 0;
    transition: all .8s;
    width: 60%;
}

.modal-header {
    background: #263238;
    height: 40px;
    line-height: 40px;
    padding: 5px 20px;
    text-align: right;
}

.modal-header h3 {
    color: white;
    float: left;
    margin: 0;
    padding: 0;
}

.modal-body {
    padding: 10px 15px;
    text-align: center;
}

.modal-footer {
    background: #263238;
    height: 35px;
    padding: 15px;
}

.close-modal-btn {
    color: white;
    cursor: pointer;
    float: right;
    font-size: 30px;
    margin: 0;
}

.close-modal-btn:hover {
    color: black;
}

.btn-cancel, .btn-continue {
    background: coral;
    border: none;
    color: white;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    padding: 10px;
}

.btn-cancel {
    background-color: #b71c1c;
    float: left;
}

.btn-continue {
    background-color: #1b5e20;
    float: right;
}

.back-drop {
    background-color: rgba(48, 49, 48, 0.42);
    height: 100%;
    position: fixed;
    transition: all 1.3s;
    width: 100%;
}

.open-modal-btn {
    margin: 15px;
    padding: 10px;
    font-weight: bold;
}


```

##### App.js

```javascript
import React, { Component } from 'react';

import Modal from './components/Modal/Modal';

class App extends Component {

	constructor() {
		super();

		this.state = {
			isShowing: false
		}
	}

	openModalHandler = () => {
		this.setState({
			isShowing: true
		});
	}

	closeModalHandler = () => {
		this.setState({
			isShowing: false
		});
	}

	render () {
		return (
			<div>
				{ this.state.isShowing ? <div onClick={this.closeModalHandler} className="back-drop"></div> : null }

				<button className="open-modal-btn" onClick={this.openModalHandler}>Open Modal</button>

				<Modal
					className="modal"
					show={this.state.isShowing}
					close={this.closeModalHandler}>
						Maybe aircrafts fly very high because they don't want to be seen in plane sight?
				</Modal>
			</div>
		);
	}
}

export default App;


```

The App.js file contains two custom functions which are:

-   **openModalHandler()** - a function that sets the state of isShowing to true thereby opening the modal.
    
-   **closeModalHandler()** - a function that sets the state of isShowing to false thereby closing the modal.
    

In the render method, a backdrop div is dynamically added based on the visibility of the modal and also an **onClick** listener is passed to the div so it can control the opening and closing of the modal. A button is also added with **onClick** listener to control the opening of the modal.

The modal component which was previously is imported and used in the render method with the values of the props passed to it.

### Testing the modal

Run **npm start** in the root directory of your project to view the modal.

[Project Repo](https://github.com/achowba/react-modal)

Thanks.