These are the steps for this tutorial:

What we’ll learn

Create a simple file structure Use react toggle state to build a simple modal Pass data between components with props Warn the user to pass a parameter while using the component

Tip: When using React components, share them with Bit so that they become reusable building blocks your team can easily share, use and sync across your projects. When building with a shared Lego box, you build faster. Try it:

Creating a Modal component structure

So, first, let’s add the boilerplate code.

import React from "react"; export default class Modal extends React.Component {

render() {

return <div>Hello Modal</div>;

}

}

Then, let’s include the Modal in the main App .

import React from "react";

import Modal from "./Component/Modal";

import "./styles.css";

class App extends React.Component {

render() {

return (

<div className="App">

<h1>Hello CodeSandbox</h1>

<Modal />

</div>

);

}

} export default App;

Now inject App component to the entry point.

import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Here’s the output after the initial setup.

Toggling the state of a Modal

The mechanism of the modal is to show and hide. This is quite easy to achieve in react because of the built-in toggle state.

First, create a button to toggle the state.

<button onClick={e => {

this.showModal();

}}

> show Modal </button>

Now create a showModal function

state = {

show: false

};

showModal = e => {

this.setState({

show: true

});

};

Now apply this state to Modal component.

<Modal show={this.state.show} />

Next, make a conditional render from Modal, condition being the show state.

Don’t forget to return null if show is false , this renders nothing. Render the component when show is true .

export default class Modal extends React.Component {

render() {

if(!this.props.show){

return null;

}

return <div>Hello Modal</div>;

}

}

Let’s click the button- the output should be something like this.

Make the content dynamic

Right now the content in Modal is hard-coded. Let’s make it dynamic by passing a prop.

<Modal show={this.state.show}>Message in Modal</Modal>

Replace Message with {this.props.children} in the Modal component.

export default class Modal extends React.Component {

render() {

if (!this.props.show) {

return null;

}

return <div>{this.props.children}</div>;

}

}

This will render whatever is passed to this component, which is just perfect for a dynamic modal.

Close the modal

After opening a modal, it needs to be closed.

Let’s add a new close button.

return (

<div>

<div>{this.props.children}</div>

<div>

<button

onClose={e => {

this.onClose(e);

}}

>

Close

</button>

</div>

</div>

);

Define the onClose function.

onClose = e => {

this.props.show = false;

};

Now set the show state to false , which makes Modal hide.

Wait! It does not work because show state is defined in App component.

So, pass a value back to App component.

onClose = e => {

this.props.onClose && this.props.onClose(e);

};

Now pass the whole event object back to App component, then trigger showModal

<Modal onClose={this.showModal} show={this.state.show}>

Message in Modal

</Modal>

And toggle the show state:

showModal = e => {

this.setState({

show: !this.state.show

});

};

The result hides the close button, as expected.

Styling the modal

Right now you don’t see any modal body because, well, it’s not there.

Let’s create modal.css .

Grab the CSS snippet from Codepen here.

Also, include JavaScript to Modal.js and add a class modal in the returning div , and more classes as below.

import React from "react";

import "./modal.css"; export default class Modal extends React.Component {

onClose = e => {

this.props.onClose && this.props.onClose(e);

};

render() {

if (!this.props.show) {

return null;

}

return (

<div class="modal" id="modal">

<h2>Modal Window</h2>

<div class="content">{this.props.children}</div>

<div class="actions">

<button class="toggle-button" onClick={this.onClose}>

close

</button>

</div>

</div>

);

}

}

In the App component, add a class toggle-button to the button.

<div className="App">

<button

class="toggle-button"

id="centered-toggle-button"

onClick={e => {

this.showModal(e);

}}

>

Now, the result! Isn’t it beautiful? 💅

Require onClose

If the component that calls Modal does not pass onClose , the Modal won't close as the show state doesn't have any effect. To fix this, warn the component to pass the onClose.

Import prop-types .

import PropTypes from "prop-types";

Add the following to the bottom of the file, outside the class.

Modal.propTypes = {

onClose: PropTypes.func.isRequired,

show: PropTypes.bool.isRequired

};

This results in a warning as below.

Recap

In this tutorial, you learned how to implement a simple modal component that you created using a div and used a toggle state to show and hide the modal. We went through the different steps from creating the file structure to styling our modal. You can find the full code on GitHub here:

Hope you liked this post, and please feel free to drop a few 👏 and comment below to ask me anything! I’m always happy to talk and help.