How to Make a Modal Popup Refresh Items on the Page
Jul 14, 2020 • 6 Minute Read
Introduction
Modal popups are a great way to manage content on the page and attract attention to specific features of an app. It's important to understand how to manipulate a React Bootstrap modal and customize it to cater to the needs of your app. For instance, you might want to reload the page after closing a review form popup on a website that shows user-based movie ratings and reviews. An API call fetching all the reviews can be put under a function that fires when the page first loads or mounts on the DOM. This way, the new review can be shown to the user right after they add it via the form.
In this guide, you'll learn several methods to refresh a page on closing a react-bootstrap modal.
Creating a React Bootstrap Modal
To get started, install react-bootstrap and bootstrap by running the following command:
npm install react-bootstrap bootstrap
Render the modal component inside App.js using the following code:
import React,{useState,useEffect} from 'react';
import {Modal} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default App;
Checking Page Reload Using useEffect()
To check page reloads, you can use componentDidMount() or its equivalent hooks implementation of useEffect(). You can put relevant console.log() or alerts inside it that notify you of page reloads.
In React, this is done by passing an empty array as the second parameter to the useEffect() hook.
useEffect(()=>{
alert('reload!')
},[])
Every time your component mounts on the DOM or first loads on the page, you will get the above alert.
Tracking Modal's Exit Events Using Props
By default, the modal animates in and out of the page. There are several events that are triggered when a modal is closed. Each event is triggered after a specific phase change that the modal undergoes. This phase change is usually a transition stage amid its entire animation. These stages can be accessed by passing specific props to the modal and invoking a callback function.
You get access to three props: onExit, onExited, and onExiting. When the modal begins to transition out of the page, first the onExiting() callback is fired followed by the onExited() callback when the modal finishes transitioning out. Finally, the onExit() callback function is fired, indicating that the modal has completely transitioned out of the page.
Another prop is onHide, which fires a callback function when you click on the modal's close icon or click anywhere in the background outside the modal.
The below line of code shows how you can pass your own callback function as props to React Bootstrap's modal component:
<Modal show={show} onHide={handleClose} onHide={callback}>
Refreshing Page Inside Callbacks
Create a simple function inside the App component or any parent component rendering your modal.
const reload=()=>window.location.reload();
The above reload() method forcefully reloads the page by invoking the built-in reload method on the browser's global object (the window object) property, the location object.
Pass this method to any of the exit events discussed in the previous section. For example, use the onExit event:
<Modal show={show} onHide={handleClose} onExit={reload}>
You can use the onExited or onExiting's events to get the same result:
<Modal show={show} onHide={handleClose} onExiting={reload}>
Alternately, you can also use the onHide prop to produce the same effect.
<Modal show={show} onHide={handleClose} onHide={reload}>
Using any of the above methods,. you get a full page to reload and an alert as the validation on closing the modal.
Refreshing Page Using onClick Event
In case you do not want to pass any additional props to your modal component, you can call the custom reload() method inside handleClose(). This is a mandatory function required to close the modal invoked by the onHide event. Call the reload() method after setting the modal's show state to false.
const handleClose = () => {
setShow(false)
reload();
};
This is similar to firing a callback after the onHide event but offers a cleaner way to achieve the same result.
Remember to call these methods for onClick events on UI elements inside the modal that are meant to close it, such as the close button in the modal's footer.
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
Conclusion
Page reloads do not offer a good user experience. They must always be coupled with necessary actions such as retrieving or sending data to the server or loading heavy assets like large images in the background. To combat this bad user experience, page reloads must always be accompanied by spinners or loaders. All the methods demonstrated in this guide work equally fine, but in situations where some props can not be accessed (for instance, when removing transitions or animations from the modal) you must use custom event handlers.
Learn More
Explore these React and Bootstrap course from Pluralsight to continue learning:
