Posted on Sep 3

react-bootstrap Modal never displays

I am tasked with rewriting our existing Feedback page into a React framework format. I am using react-bootstrap to try to make it easier for me to rewrite the modal, however, the modal never displays, even after clicking the "Feedback" link; even the resulting HTML never appears in Inspect Element.

I have no idea what I am doing wrong, even after visiting about 10 different tutorials and various sites.

// feedback_container.js export const FeedbackContainer = () => { return ( <div className="feedback"> <a href={URL_PREFIX + '/portal/feedback?url=/'} id="feedback-link" data-toggle="modal" data-target="#feedback-modal" onClick={(event) => { event.preventDefault(); return false; }}> <img src={feedbackPng} alt="feedback"/> </a> </div> <div className="modal fade modal-wide" id="feedback-modal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <FeedbackModal /> </div> ); }

import React, {useEffect, useState} from 'react'; import {htmlDecode, useGetData} from "../functions/global_functions"; import {URL_PREFIX} from "../constants/global_constants"; //import $ from 'jquery'; //import 'bootstrap/dist/css/bootstrap.min.css'; import {Modal} from "react-bootstrap"; /** * Used within "./feedback_container.js" * * @returns {JSX.Element} * @constructor */ const FeedbackModalContentDeliverer = () => { const url = URL_PREFIX + '/portal/feedback?url=/'; let html = useGetData({url: url, isJson: false}); const [content, setContent] = useState(''); const [loading, setLoading] = useState(true); useEffect(() => { if (typeof html !== 'undefined' && html !== null && html.trim().length > 0) { console.log('works?'); // eslint-disable-next-line html = html.substring(html.indexOf('<h1>Feedback</h1>'), html.lastIndexOf('</form></div>') + '</form></div>'.length); setLoading(false); setContent(html); } }, [html]); if (loading) { return ( <></> ); } else { console.log(content); return ( <> {htmlDecode(content)} </> ); } }; /** * The actual modal * * @returns {Element} * @constructor */ const FeedbackModal = () => { const [show, setShow] = useState(false); const handleClose = () => setShow(false); return ( <> <Modal id="your_feedback_modal" show={show} onHide={handleClose}> <div className="modal-dialog"> <div className="modal-content"> <div className="modal-header"> <button type="button" className="close" data-dismiss="modal" id="feedback_modal_close_button" onClick={handleClose} aria-hidden="false">&times;</button> <h4 className="modal-title" id="myModalLabel">Feedback</h4> </div> <div id="feedback-body" className="modal-body"> <FeedbackModalContentDeliverer /> </div> </div> </div> </Modal> </> ); } export default FeedbackModal;

Can someone please help? The content via useGetData does actually work, but the HTML to display the content in the modal does not.

Thanks

Top comments (1)

Phillip Powell • Sep 3

I updated this morning and it still doesn't work. Currently it turns everything jet black, the entire page, so, in a sense, it's worse:

These are the changes based on online recommendations by GitHub and Stack Overflow:

// feedback_container.js const FeedbackContainer = () => { return ( <> <div className="feedback"> <a href={URL_PREFIX + '/portal/feedback?url=/'} id="feedback-link" data-toggle="modal" data-target="#feedback-modal" onClick={(event) => { event.preventDefault(); return false; }}> <img src={feedbackPng} alt="feedback"/> </a> </div> <div id="feedback-modal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel"> <FeedbackModal /> </div> </> ); }

import React, {useEffect, useState} from 'react'; import {htmlDecode, useGetData} from "../functions/global_functions"; import {URL_PREFIX} from "../constants/global_constants"; //import $ from 'jquery'; //import 'bootstrap/dist/css/bootstrap.min.css'; import {Button, Modal} from "react-bootstrap"; /** * Used within "./feedback_container.js" * * @returns {JSX.Element} * @constructor */ const FeedbackModalContentDeliverer = () => { const url = URL_PREFIX + '/portal/feedback?url=/'; let html = useGetData({url: url, isJson: false}); const [content, setContent] = useState(''); const [loading, setLoading] = useState(true); useEffect(() => { if (typeof html !== 'undefined' && html !== null && html.trim().length > 0) { console.log('works?'); // eslint-disable-next-line html = html.substring(html.indexOf('<h1>Feedback</h1>'), html.lastIndexOf('</form></div>') + '</form></div>'.length); setLoading(false); setContent(html); } }, [html]); if (loading) { return ( <></> ); } else { console.log(content); return ( <> {htmlDecode(content)} </> ); } }; /** * The actual modal * * @returns {Element} * @constructor */ const FeedbackModal = () => { const [show, setShow] = useState(false); const handleClose = () => setShow(false); return ( <> <span id="feedback_modal_description" className="unseen" aria-roledescription="dialog"> This modal will produce the Feedback form for you to fill out to leave feedback. You may click outside of the modal or the "X" button on the upper right hand corner of the modal to close the modal without leaving feedback. </span> <Modal id="your_feedback_modal" aria-describedby="feedback_modal_description" role="dialog" animation={false} style={{background: "transparent !important"}} show={show} onHide={handleClose}> <Modal.Header className="modal-header"> <Modal.Title id="myModalLabel" className="modal-title"> Feedback </Modal.Title> <Button className="close" data-dismiss="modal" id="feedback_modal_close_button" onClick={handleClose} aria-label="Close" aria-hidden="false">&times;</Button> </Modal.Header> <Modal.Body id="feedback-body" className="modal-body"> <FeedbackModalContentDeliverer /> </Modal.Body> <Modal.Footer></Modal.Footer> </Modal> </> ); } export default FeedbackModal;