<p>I often run into a question "How to create modal dialog with React". Modal dialogs are also something that I need to use from time to time in my own projects. So I thought that I'd share a simple re-usable Modal component with you guys and hopefully it might be of help for some of you. So let's get to it!</p>
<p><em>Check out also my post on <a href="/blog/6-things-every-beginner-react-developer-should-know/">6 things every beginner React developer should know</a>.</em></p>
<p>Creating a modal dialog with React is a bit different than the traditional Javascript way. In React you basically need two components. The actual Modal component which takes in as props the information if it should be open or closed (shown or hidden) and then a wrapper component that passes these props and takes care of managing them.</p>
<p>It is probably easier if you see the code for the <code>Modal</code> component first and then we go over it.</p>
<pre><code class="language-jsx">import React from "react";
import PropTypes from "prop-types";

class Modal extends React.Component {
  render() {
    if (!this.props.isOpen) {
      return null;
    }

    const BackgroundStyle = {
      backgroundColor: "rgba(220,220,220,0.5)",
      position: "fixed",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    };

    const ModalStyle = {
      maxWidth: 400,
      minHeight: 200,
      backgroundColor: "#fff",
      margin: "auto",
      padding: 5,
    };

    const HeaderStyle = {
      height: 20,
      width: "100%",
    };

    const CloseBtnStyle = {
      float: "right",
      cursor: "pointer",
      display: "block",
    };

    return (
      &#x3C;div style={BackgroundStyle}>
        &#x3C;div style={ModalStyle}>
          &#x3C;div style={HeaderStyle}>
            &#x3C;span style={CloseBtnStyle} onClick={this.props.onClose}>
              X
            &#x3C;/span>
          &#x3C;/div>
          {this.props.children}
        &#x3C;/div>
      &#x3C;/div>
    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.function,
  isOpen: PropTypes.bool,
  children: PropTypes.node,
};

export default Modal;
</code></pre>
<p>The <code>Modal</code> component really only needs the render-method. The most important part happens right at the beginning of the <code>render</code> method.</p>
<pre><code class="language-jsx">if (!this.props.isOpen) {
  return null;
}
</code></pre>
<p>We check if the <code>isOpen</code> prop is <code>true</code> or <code>false</code> and based on that we decide if we continue rendering the <code>Modal</code> component. If it is <code>false</code> we just return <code>null</code> and no modal is rendered.</p>
<p>The <code>render</code> method also have some styling definitions that give the component the transparent gray background which covers everything under the modal and makes sure that only things on the modal can be clicked. The modal window has white background and is aligned in the middle of the screen. You can modify these style definitions to fit your preferences.</p>
<h2>Wrapping our Modal component</h2>
<p>I mentioned earlier that we need two components. We now have the <code>Modal</code> component but we still need a component we can wrap around it, a component that has the information if the modal should be open or closed. We will call it the <code>App</code> component in this example. Here is the code for our <code>App</code> component.</p>
<pre><code class="language-jsx">import React from "react";
import Modal from "./Modal";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleModal = this.toggleModal.bind(this);

    this.state = {
      isModalOpen: false,
    };
  }

  toggleModal() {
    const { isModalOpen } = this.state;
    this.setState({ isModalOpen: !isModalOpen });
  }

  render() {
    return (
      &#x3C;div>
        &#x3C;button onClick={this.toggleModal}>Open modal dialog&#x3C;/button>
        &#x3C;Modal isOpen={this.state.isModalOpen} onClose={this.toggleModal}>
          &#x3C;div>Hello CodePulse!&#x3C;/div>
          &#x3C;div>You can add your modal content here!&#x3C;/div>
        &#x3C;/Modal>
      &#x3C;/div>
    );
  }
}

export default App;
</code></pre>
<p>The <code>App</code> component has <code>isModalOpen</code> stored in its state. This is used (as you might guess) to determine if the modal is open or closed.</p>
<p>Another part we need to have is <code>toggleModal</code> method. It reverses the current value of <code>isModalOpen</code>. So if <code>isModalOpen</code> is <code>false</code>, <code>toggleModal</code> method will set it to <code>true</code> and vice versa. This causes the <code>App</code> component to re-render and as a result the <code>Modal</code> component will re-render also.</p>
<p>Lastly in the <code>render</code> method we render the <code>Modal</code> component and pass in <code>isModalOpen</code> as <code>isOpen</code> prop and the <code>toggleModal</code> method as <code>onClose</code> prop. This way when in the <code>Modal</code> component the <code>onClose</code> is called, it actually calls the <code>App</code> component's <code>toggleModal</code> method which will set the <code>isModalOpen</code> to <code>false</code> and cause a re-render which then hides the modal.</p>
<p><img src="./images/modal-dialog-react-e1554235151404-1024x307.png" alt="Modal dialog in React">This is what the open modal dialog will look like</p>
<h2>TL;DR</h2>
<p>I created a <a href="/blog/online-code-editor-every-web-developer-should-know-about/">codesandbox</a> so you can see the whole code for this example. The codesandbox can be found <a href="https://codesandbox.io/embed/w72z3p63ql">here</a>.</p>
<h2>Conclusion</h2>
<p>That is how you can create your own modal component. If you don't want to create a modal component by yourself, you might want to check out some of the ready made modal components out there e.g. <a href="https://github.com/reactjs/react-modal">react-modal</a>.</p>
<p>I would like to hear from you so if you have any comments, please drop them below!</p>
<p>Remember also to subscribe to CodePulse newsletter, if you haven't already, to stay tuned on the latest news and posts about modern web development. Newsletters go out usually max once a month and you can unsubscribe anytime you want.</p>



I often run into a question "How to create modal dialog with React". Modal dialogs are also something that I need to use from time to time in my own projects. So I thought that I'd share a simple re-usable Modal component with you guys and hopefully it might be of help for some of you. So let's get to it!

_Check out also my post on [6 things every beginner React developer should know](/blog/6-things-every-beginner-react-developer-should-know/)._

Creating a modal dialog with React is a bit different than the traditional Javascript way. In React you basically need two components. The actual Modal component which takes in as props the information if it should be open or closed (shown or hidden) and then a wrapper component that passes these props and takes care of managing them.

It is probably easier if you see the code for the `Modal` component first and then we go over it.

```jsx
import React from "react";
import PropTypes from "prop-types";

class Modal extends React.Component {
  render() {
    if (!this.props.isOpen) {
      return null;
    }

    const BackgroundStyle = {
      backgroundColor: "rgba(220,220,220,0.5)",
      position: "fixed",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    };

    const ModalStyle = {
      maxWidth: 400,
      minHeight: 200,
      backgroundColor: "#fff",
      margin: "auto",
      padding: 5,
    };

    const HeaderStyle = {
      height: 20,
      width: "100%",
    };

    const CloseBtnStyle = {
      float: "right",
      cursor: "pointer",
      display: "block",
    };

    return (
      <div style={BackgroundStyle}>
        <div style={ModalStyle}>
          <div style={HeaderStyle}>
            <span style={CloseBtnStyle} onClick={this.props.onClose}>
              X
            </span>
          </div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.function,
  isOpen: PropTypes.bool,
  children: PropTypes.node,
};

export default Modal;
```

The `Modal` component really only needs the render-method. The most important part happens right at the beginning of the `render` method.

```jsx
if (!this.props.isOpen) {
  return null;
}
```

We check if the `isOpen` prop is `true` or `false` and based on that we decide if we continue rendering the `Modal` component. If it is `false` we just return `null` and no modal is rendered.

The `render` method also have some styling definitions that give the component the transparent gray background which covers everything under the modal and makes sure that only things on the modal can be clicked. The modal window has white background and is aligned in the middle of the screen. You can modify these style definitions to fit your preferences.

## Wrapping our Modal component

I mentioned earlier that we need two components. We now have the `Modal` component but we still need a component we can wrap around it, a component that has the information if the modal should be open or closed. We will call it the `App` component in this example. Here is the code for our `App` component.

```jsx
import React from "react";
import Modal from "./Modal";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleModal = this.toggleModal.bind(this);

    this.state = {
      isModalOpen: false,
    };
  }

  toggleModal() {
    const { isModalOpen } = this.state;
    this.setState({ isModalOpen: !isModalOpen });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>Open modal dialog</button>
        <Modal isOpen={this.state.isModalOpen} onClose={this.toggleModal}>
          <div>Hello CodePulse!</div>
          <div>You can add your modal content here!</div>
        </Modal>
      </div>
    );
  }
}

export default App;
```

The `App` component has `isModalOpen` stored in its state. This is used (as you might guess) to determine if the modal is open or closed.

Another part we need to have is `toggleModal` method. It reverses the current value of `isModalOpen`. So if `isModalOpen` is `false`, `toggleModal` method will set it to `true` and vice versa. This causes the `App` component to re-render and as a result the `Modal` component will re-render also.

Lastly in the `render` method we render the `Modal` component and pass in `isModalOpen` as `isOpen` prop and the `toggleModal` method as `onClose` prop. This way when in the `Modal` component the `onClose` is called, it actually calls the `App` component's `toggleModal` method which will set the `isModalOpen` to `false` and cause a re-render which then hides the modal.

![Modal dialog in React](/blog-posts/how-to-create-modal-dialog-with-react/images/modal-dialog-react-e1554235151404-1024x307.png)This is what the open modal dialog will look like

## TL;DR

I created a [codesandbox](/blog/online-code-editor-every-web-developer-should-know-about/) so you can see the whole code for this example. The codesandbox can be found [here](https://codesandbox.io/embed/w72z3p63ql).

## Conclusion

That is how you can create your own modal component. If you don't want to create a modal component by yourself, you might want to check out some of the ready made modal components out there e.g. [react-modal](https://github.com/reactjs/react-modal).

I would like to hear from you so if you have any comments, please drop them below!

Remember also to subscribe to CodePulse newsletter, if you haven't already, to stay tuned on the latest news and posts about modern web development. Newsletters go out usually max once a month and you can unsubscribe anytime you want.


How to create modal dialog with React? This tutorial will show you just that! You will also get a finished component you can use right away.

How to create modal dialog with React

<p>If you are working with Javascript and sending data to server, especially when you need to send files, you might have run into <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</a> object. It is handy way to form set of key/value pairs that represent form fields and values. You will most likely run into a situation where you want to inspect your <code>FormData</code> object. Normally you could just <code>console.log</code> the object, but this doesn't work with FormData object.</p>
<p>If you console.log FormData object, you will just get empty object logged to the console. What you need to do is use <code>entries</code> property. Here is how you can log all key/value pairs to console using <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries">entries</a> property.</p>
<pre><code class="language-js">var formData = new FormData();
formData.append("key_one", "First value");
formData.append("key_two", "Second value");
formData.append("key_three", "Thrid value");

// Log the key/value pairs
for (var pair of formData.entries()) {
  console.log(pair[0] + " - " + pair[1]);
}
</code></pre>
<p>This logs the following to the console:</p>
<pre><code>key_one - First value
key_two - Second value
key_three - Thrid value
</code></pre>
<p><code>FormData.entries()</code> returns array of the form data key/value pairs. Each row in the array contains one key/value pair. So item key is in the index 0 and item value is in the index 1.</p>
<p>Logging the values is just one example on what you can do with the key/value pairs. If you need to inspect the values of a FormData object for some other purpose, it is obviously easy to do using the <code>entries</code> property.</p>



If you are working with Javascript and sending data to server, especially when you need to send files, you might have run into [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object. It is handy way to form set of key/value pairs that represent form fields and values. You will most likely run into a situation where you want to inspect your `FormData` object. Normally you could just `console.log` the object, but this doesn't work with FormData object.

If you console.log FormData object, you will just get empty object logged to the console. What you need to do is use `entries` property. Here is how you can log all key/value pairs to console using [entries](https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries) property.

```js
var formData = new FormData();
formData.append("key_one", "First value");
formData.append("key_two", "Second value");
formData.append("key_three", "Thrid value");

// Log the key/value pairs
for (var pair of formData.entries()) {
  console.log(pair[0] + " - " + pair[1]);
}
```

This logs the following to the console:

```
key_one - First value
key_two - Second value
key_three - Thrid value
```

`FormData.entries()` returns array of the form data key/value pairs. Each row in the array contains one key/value pair. So item key is in the index 0 and item value is in the index 1.

Logging the values is just one example on what you can do with the key/value pairs. If you need to inspect the values of a FormData object for some other purpose, it is obviously easy to do using the `entries` property.


If you want to see the values of FormData object, console.log does not work. Instead you need to use a property provided by FormData to inspect the values.

How to display FormData object values in Javascript

<p>I am excited to announce that the course "Rich text editing in React with Draft.js" is now LIVE! It is an online course that I created. It is something that I have been working on quite a bit lately. The course is basics course for Draft.js so if you are not yet familiar with the basics of Draft.js, this course is for you!</p>
<p>Few of the topics that the course covers are</p>
<ul>
<li>How to add rich text editor component to your React application</li>
<li>How to add features like bold and underline to the editor</li>
<li>How to save rich text content to database</li>
<li>How to load rich text content from database</li>
<li>How to edit saved content</li>
<li>How to display saved rich text content e.g. as HTML</li>
</ul>
<p>There is two ways you can get the course: <a href="https://skl.sh/2WhSXc2">Skillshare</a> and <a href="http://bit.ly/2Z9iOzS">Udemy</a>.</p>
<p><a href="http://www.youtube.com/watch?v=nS38-rxU1uo"><img src="http://img.youtube.com/vi/nS38-rxU1uo/0.jpg" alt="RICH TEXT EDITING IN REACT WITH DRAFT.JS // COURSE"></a></p>
<h2>Get it on Skillshare (FREE)</h2>
<p>Skillshare is an online learning community with thousands of classes covering dozens of different topics. Premium membership gives you unlimited access to high quality classes from experts working their fields to help you learn new skills.</p>
<p>You need a premium membership, priced at $14 / month, to take classes. Good news is that right now (not sure how much longer) they have this promotion going on where you get <strong>2 months of premium membership for free</strong> when you register through <a href="https://skl.sh/2WhSXc2">this link</a>. Yes you read right. You can take my course (and any other course on the platform) for free!</p>
<h2>Get it on Udemy ($9.99)</h2>
<p>Udemy is a little different than Skillshare. It is also an online learning platform but it sells courses for fixed price rather than for a monthly subscription. My course "Rich text editing in React with Draft.js" is going for $24.99 but I decided to give Codepulse readers a hefty discount and first 100 people who enroll for the course will get it on a -60% discount for $9.99. You can get the discounted price by using code CODEPULSE or clicking <a href="http://bit.ly/2Z9iOzS">this link</a>.</p>
<p>This course is something I have planned to do for a long time and I am super happy that it is now finished and available for everyone to take! If you take the course, either on Skillshare or Udemy, first of all I want to say thank you, I really do appreciate it! But also please leave a review or otherwise let me know what you thought of the course, it will help me develop the course for better.</p>
<p><em>Is there a course you would be interested in taking? Leave a comment below for the topic. I am planning on my next course and it would be great to hear what kind of course you would be interested!</em></p>



I am excited to announce that the course "Rich text editing in React with Draft.js" is now LIVE! It is an online course that I created. It is something that I have been working on quite a bit lately. The course is basics course for Draft.js so if you are not yet familiar with the basics of Draft.js, this course is for you!

Few of the topics that the course covers are

- How to add rich text editor component to your React application
- How to add features like bold and underline to the editor
- How to save rich text content to database
- How to load rich text content from database
- How to edit saved content
- How to display saved rich text content e.g. as HTML

There is two ways you can get the course: [Skillshare](https://skl.sh/2WhSXc2) and [Udemy](http://bit.ly/2Z9iOzS).

[![RICH TEXT EDITING IN REACT WITH DRAFT.JS // COURSE](http://img.youtube.com/vi/nS38-rxU1uo/0.jpg)](http://www.youtube.com/watch?v=nS38-rxU1uo)

## Get it on Skillshare (FREE)

Skillshare is an online learning community with thousands of classes covering dozens of different topics. Premium membership gives you unlimited access to high quality classes from experts working their fields to help you learn new skills.

You need a premium membership, priced at $14 / month, to take classes. Good news is that right now (not sure how much longer) they have this promotion going on where you get **2 months of premium membership for free** when you register through [this link](https://skl.sh/2WhSXc2). Yes you read right. You can take my course (and any other course on the platform) for free!

## Get it on Udemy ($9.99)

Udemy is a little different than Skillshare. It is also an online learning platform but it sells courses for fixed price rather than for a monthly subscription. My course "Rich text editing in React with Draft.js" is going for $24.99 but I decided to give Codepulse readers a hefty discount and first 100 people who enroll for the course will get it on a -60% discount for $9.99. You can get the discounted price by using code CODEPULSE or clicking [this link](http://bit.ly/2Z9iOzS).

This course is something I have planned to do for a long time and I am super happy that it is now finished and available for everyone to take! If you take the course, either on Skillshare or Udemy, first of all I want to say thank you, I really do appreciate it! But also please leave a review or otherwise let me know what you thought of the course, it will help me develop the course for better.

_Is there a course you would be interested in taking? Leave a comment below for the topic. I am planning on my next course and it would be great to hear what kind of course you would be interested!_


Do you want to add rich text to your React application? Draft.js is great way to do that but it can be difficult to get started. Not after this course! You learn all the basics of Draft.js on the course.

How to display FormData object values in Javascript

Subscribe to the newsletter