Create Simple Modal Pop-up with React

We are going to create a very Simple Modal box component with ReactJs. The purpose of this simple example is to show, how to get modal box fields data to the related component.

Demo

import React from "react";
import ReactDOM from "react-dom";

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

    this.state = {
      name: "",
    };
  }

  render() {
    return (
      <div className="App">
        <h1>Hello!! {this.state.name}</h1>
        <a href="javascript:;">
          Open Modal
        </a>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I have used the bootstrap in my example, so that we can implement the pre defined css. In the above code i simply display a Hello heading and an anchor tag with the value open modal. We will later implement the click even on the anchor tag to open the modal window.

So now let’s create a component with the name Modal.js and save it to the components directory. We choose components directory because we better know the location of our re-usable components.

Let’s create Modal.js file and paste the below codes.

import React from "react";

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal d-block" : "modal d-none";

  return (
    <div className={showHideClassName}>
      <div className="modal-container">
        {children}
        <a href="javascript:;" className="modal-close" onClick={handleClose}>
          close
        </a>
      </div>
    </div>
  );
};

export default Modal;

As you see we have created a stateless component that requires 3 properties handleClose, show and children. Where handleClose is used to close the Modal box, the show is used for hiding and showing the Modal box and the children is used for the external HTML or component.

Let’s implement our Modal component to the index.js file. First of all import the Modal component in the index.js file and set the extra html into it.

import React from "react";
import ReactDOM from "react-dom";
import Modal from "./components/Modal";


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

    this.state = {
      name: "",
    };
  }
  

  render() {
    return (
      <div className="App">
        <h1>Hello!! {this.state.name}</h1>
        <a href="javascript:;">
          Open Modal
        </a>
        <Modal>
          <h2>Hello Modal</h2>
          <div className="form-group">
            <label>Enter Name:</label>
            <input
              type="text"
              className="form-control"
            />
          </div>
          <div className="form-group">
            <button type="button">
              Save
            </button>
          </div>
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

If the check this code in the browser then nothing will display in the browser that is because of bootstrap css classes. Let’s implement some events and states to handle our Modal Box.

import React from "react";
import ReactDOM from "react-dom";
import Modal from "./components/Modal";

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

    this.state = {
      modal: false,
      name: "",
      modalInputName: ""
    };
  }

  handleChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.value;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(e) {
    this.setState({ name: this.state.modalInputName });
    this.modalClose();
  }

  modalOpen() {
    this.setState({ modal: true });
  }

  modalClose() {
    this.setState({
      modalInputName: "",
      modal: false
    });
  }

  render() {
    return (
      <div className="App">
        <h1>Hello!! {this.state.name}</h1>
        <a href="javascript:;" onClick={e => this.modalOpen(e)}>
          Open Modal
        </a>
        <Modal show={this.state.modal} handleClose={e => this.modalClose(e)}>
          <h2>Hello Modal</h2>
          <div className="form-group">
            <label>Enter Name:</label>
            <input
              type="text"
              value={this.state.modalInputName}
              name="modalInputName"
              onChange={e => this.handleChange(e)}
              className="form-control"
            />
          </div>
          <div className="form-group">
            <button onClick={e => this.handleSubmit(e)} type="button">
              Save
            </button>
          </div>
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Let’s start explaining with the states. We have used 3 states that is modal, name and modalInputName with default values. modal state holds the boolean value, default we are giving false because we don’t want to display the default Modal box opened. We only want to open the Modal box with click event.

Now we have defined some events and mapped that events with our Modal components. The modalOpen() and modalClose() event is used to hide and show the Modal box. The handleChange() and handleSubmit() is used for the internal content of the Modal box.

This is how we have implemented the states and events with the Modal component.

return (
      <div className="App">
        <h1>Hello!! {this.state.name}</h1>
        <a href="javascript:;" onClick={e => this.modalOpen(e)}>
          Open Modal
        </a>
        <Modal show={this.state.modal} handleClose={e => this.modalClose(e)}>
          <h2>Hello Modal</h2>
          <div className="form-group">
            <label>Enter Name:</label>
            <input
              type="text"
              value={this.state.modalInputName}
              name="modalInputName"
              onChange={e => this.handleChange(e)}
              className="form-control"
            />
          </div>
          <div className="form-group">
            <button onClick={e => this.handleSubmit(e)} type="button">
              Save
            </button>
          </div>
        </Modal>
      </div>
    );

Hope I did well to make you understand and creating the simple modal box with ReactJs.

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.