react-bootstrap Modal never displays

Phillip Powell · 2025-09-03T05:30:35+0100

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.

Code:

// 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>
  );
}

Code:

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

Continue reading...

react-bootstrap Modal never displays

Phillip Powell

Guest