How to Close a Modal on Button Click in React: A Complete Guide (2026)

React is a powerful library for building user interfaces, but it can be tricky to manage component state and behaviors like opening and closing modals. If you're struggling to close a modal when a button inside it is clicked, you're not alone. This guide will walk you through implementing a functional and reusable modal component in React, complete with open and close functionalities.

Key Takeaways

• Understand the basics of state management in React for handling modals.
• Learn how to open and close a modal using state toggling.
• Create a reusable modal component with close functionality on button click.
• Implement event handlers to manage modal visibility efficiently.

In today's tutorial, you'll learn how to manage the visibility of a modal component in React. This skill is crucial for creating interactive and user-friendly web applications. By the end of this guide, you will be able to open a modal from a parent component and close it using a button within the modal itself. This approach is not only useful for modals but can also be applied to other UI components that require toggling visibility.

Prerequisites

Before diving into the tutorial, make sure you have the following:

• Basic understanding of React and JavaScript ES6+
• Node.js and npm installed on your computer
• Create React App set up on your development environment

Step 1: Set Up Your React Project

First, you'll need to set up your React project. If you haven't already, you can use Create React App to bootstrap your application:

npx create-react-app modal-example

Navigate into your project directory:

cd modal-example

Step 2: Create the Modal Component

Let's create a new component called Modal that will represent our modal dialog. This component will be responsible for rendering the modal content and providing a button to close it.

// src/Modal.js
import React from 'react';

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    
      
        Modal Title
        This is a modal. Click the button to close it.
        Close Modal
      
    
  );
};

export default Modal;

This component takes two props: isOpen, a boolean that determines if the modal should be displayed, and onClose, a function that will be called when the close button is clicked.

Step 3: Style the Modal

Next, let's add some styles to make our modal look nice. Create a CSS file named Modal.css and include it in your Modal component.

/* src/Modal.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
}
button {
  margin-top: 20px;
}

Step 4: Implement the Modal in the Main Component

Now, integrate the Modal component into your main application. In this example, we'll modify the App component to include a button that opens the modal.

// src/App.js
import React, { useState } from 'react';
import Modal from './Modal';
import './Modal.css';

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);

  return (
    
      Welcome to the Modal Example
      Open Modal
      
    
  );
}

export default App;

Here, we use React's useState hook to manage the isModalOpen state. The openModal and closeModal functions are used to toggle this state, which determines whether the modal is displayed.

Common Errors/Troubleshooting

• Modal not closing: Ensure that the onClose function is correctly passed to the Modal component and that it's updating the state.
• Overlay not covering the screen: Check your CSS to ensure the .modal-overlay is set to position fixed and covers the entire viewport.
• Modal content not centered: Verify the flexbox properties in your CSS, ensuring the modal content is centered within the overlay.

By following these steps, you should have a functional modal component that opens and closes as expected in your React application. This pattern provides a clean and efficient way to manage modal visibility and can be extended to other components that require similar functionality.

Frequently Asked Questions

How do I open a modal in React?

You can open a modal by setting a state variable, such as isModalOpen, to true using React's useState hook, and then conditionally rendering the modal component based on this state.

Why is my modal not closing?

Ensure the function passed to the modal's close button is correctly updating the state. Also, check if the state variable that controls modal visibility is managed properly.

Can I reuse the modal component?

Yes, by passing props such as isOpen and onClose, you can reuse the modal component in different parts of your application.