Bootstrap Modal Development
Fri Jun 16 2023 05:41:48 GMT+0000 (Coordinated Universal Time)
Saved by @JISSMONJOSE #react.js #css #javascript
Sure! I can help you with that. Here's an example of how you can create a Bootstrap modal in React and use it to show a confirmation popup before redirecting to the `/wills/quick-booking` route: First, make sure you have the Bootstrap CSS and JS files included in your project. Next, create a new React component called `ConfirmationModal`: ```jsx import React from 'react'; import { Modal, Button } from 'react-bootstrap'; const ConfirmationModal = ({ show, handleClose, handleContinue }) => { return ( <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Confirm</Modal.Title> </Modal.Header> <Modal.Body> <p>Testators may enter minimum information to secure an appointment.</p> <p> Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation. </p> <p>Registered Will Draftsmen are requested to refrain from using the quick booking option.</p> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Cancel </Button> <Button variant="primary" onClick={handleContinue}> Continue </Button> </Modal.Footer> </Modal> ); }; export default ConfirmationModal; ``` In your main component where the link is located, you can use the `ConfirmationModal` component and handle its state: ```jsx import React, { useState } from 'react'; import { Link, useHistory } from 'react-router-dom'; import ConfirmationModal from './ConfirmationModal'; const MainComponent = () => { const [showModal, setShowModal] = useState(false); const history = useHistory(); const handleShowModal = () => { setShowModal(true); }; const handleCloseModal = () => { setShowModal(false); }; const handleContinue = () => { handleCloseModal(); history.push('/wills/quick-booking'); }; return ( <div> <Link to="/wills/quick-booking" onClick={handleShowModal}> <span className="box-title">Book Quick Appointment</span> </Link> <ConfirmationModal show={showModal} handleClose={handleCloseModal} handleContinue={handleContinue} /> </div> ); }; export default MainComponent; ``` In the above example, the `MainComponent` renders a link with the class name `box-title`, and when clicked, it calls the `handleShowModal` function to show the modal popup. The modal is conditionally rendered based on the `showModal` state. The `ConfirmationModal` component receives three props: `show` (to determine whether the modal should be displayed), `handleClose` (to close the modal), and `handleContinue` (to handle the continue button click and redirect to the desired route). When the user clicks "Continue" in the modal, the `handleContinue` function is called, which first closes the modal and then uses the `useHistory` hook from React Router to navigate to the `/wills/quick-booking` route. Remember to adjust the code and import the necessary dependencies based on your project structure and setup. I hope this helps! Let me know if you have any further questions.
Comments