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">×</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)
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: