I am trying to ad some gofundme donation buttons on a react page but it doesn't even show on screen.
const Donation = () => {
return (
<div>
<div className="gfm-embed" data-url="https://www.gofundme.com/f/theyre-the-real-victims/widget/large/"></div>
<script defer src="https://www.gofundme.com/static/js/embed.js"></script>
</div>
)
}
export default Donation
I have neve done anything like this before. Any help will be appreciated.
React uses innerHTML to add elements to the DOM. innerHTML disables execution of script tags.
HTML5 specifies that a tag inserted with innerHTML should not execute.
So, the recommended way to include script tags is via the useEffect hook
const Donation = () => {
useEffect(() => {
const script = document.createElement('script');
script.src = "https://www.gofundme.com/static/js/embed.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);
return (
<div>
<div className="gfm-embed" data-url="https://www.gofundme.com/f/theyre-the-real-victims/widget/large/"></div>
</div>
)
};
export default Donation