How to add JS embed script to React project - javascript

I am new to web development and have been practicing React by building a site. I need to embed multiple JS scripts to display 360 tours on the site. But can't get it to work. When I use the JS script embed it does not appear on site.
I have included the script in the public/index.html head as follow:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
<title>React App</title>
</head>
Here is my code within the component:
import React from 'react';
import "./portfolio.css";
import { CTA } from '../../components';
const Portfolio = () => {
return (
<div className='portfolio' id="portfolio">
<div className="portfolio-heading">
<h1>Examples</h1>
<p>Experience virtual tours from the customer perspective</p>
</div>
<div className="portfolio-cards">
<div className="card-container-card">
<div className="card-container-card-img">
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
</div>
<div className="card-container-card-title">
<p>Revel x Plato</p>
</div>
</div>
</div>
< CTA />
</div>
)
}
export default Portfolio

Related

Blocked scripts in react

I don't understand why when executing a react em application it blocks the scripts that I have in the index.html
"Blocked script execution in 'data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%230000...%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%23000000%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22apple-touch-icon%22%20href=%22/logo192.png%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22manifest%22%20href=%22/manifest.json%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.googleapis.com%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.gstatic.com%22%20crossorigin%20/%3E%0D%0A%20%20%3Clink%0D%0A%20%20%20%20href=%22https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%22%0D%0A%20%20%20%20rel=%22stylesheet%22%20/%3E%0D%0A%0D%0A%0D%0A%20%20%3Ctitle%3EVisitik%20Control%3C/title%3E%0D%0A%3Cscript%20defer%20src=%22/static/js/bundle.js%22%3E%3C/script%3E%3C/head%3E%0D%0A%0D%0A%3Cbody%20class=%22h-screen%20m-0%20overflow-hidden%22%3E%0D%0A%20%20%3Cdiv%20id=%22root%22%20class=%22h-screen%22%3E%3C/div%3E%0D%0A%20%20%3Cscript%20src=%22websdk.client.bundle.min.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20src=%22fingerprint.sdk.min.js%22%3E%3C/script%3E%0D%0A%20%20%3C!--%20%3Cscript%20src=%22https://polyfill.io/v3/polyfill.min.js?features=Symbol%252Cfetch%252CString.prototype.endsWith%252CObject.assign%252CArray.prototype.findIndex%252CArray.prototype.includes%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20type=%22text/javascript%22%20src=%22modules/websdk/index.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20id=%22TextEncoder-shim%22%3E%0D%0A%20%20%20%20if%20(typeof%20(TextEncoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextEncoder%20=%20function%20TextEncoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextEncoder.prototype.encode%20=%20function%20(s)%20%7B%0D%0A%20%20%20%20%20%20%20%20const%20e%20=%20new%20Uint8Array(s.length);%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20s.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20e%5Bi%5D%20=%20s.charCodeAt(i);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20e;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20if%20(typeof%20(TextDecoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextDecoder%20=%20function%20TextDecoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E (0)
[electron] [6944:0924/095549.592:ERROR:CONSOLE(0)] "Blocked script execution in 'data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%230000...%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%23000000%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22apple-touch-icon%22%20href=%22/logo192.png%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22manifest%22%20href=%22/manifest.json%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.googleapis.com%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.gstatic.com%22%20crossorigin%20/%3E%0D%0A%20%20%3Clink%0D%0A%20%20%20%20href=%22https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%22%0D%0A%20%20%20%20rel=%22stylesheet%22%20/%3E%0D%0A%0D%0A%0D%0A%20%20%3Ctitle%3EVisitik%20Control%3C/title%3E%0D%0A%3Cscript%20defer%20src=%22/static/js/bundle.js%22%3E%3C/script%3E%3C/head%3E%0D%0A%0D%0A%3Cbody%20class=%22h-screen%20m-0%20overflow-hidden%22%3E%0D%0A%20%20%3Cdiv%20id=%22root%22%20class=%22h-screen%22%3E%3C/div%3E%0D%0A%20%20%3Cscript%20src=%22websdk.client.bundle.min.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20src=%22fingerprint.sdk.min.js%22%3E%3C/script%3E%0D%0A%20%20%3C!--%20%3Cscript%20src=%22https://polyfill.io/v3/polyfill.min.js?features=Symbol%252Cfetch%252CString.prototype.endsWith%252CObject.assign%252CArray.prototype.findIndex%252CArray.prototype.includes%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20type=%22text/javascript%22%20src=%22modules/websdk/index.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20id=%22TextEncoder-shim%22%3E%0D%0A%20%20%20%20if%20(typeof%20(TextEncoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextEncoder%20=%20function%20TextEncoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextEncoder.prototype.encode%20=%20function%20(s)%20%7B%0D%0A%20%20%20%20%20%20%20%20const%20e%20=%20new%20Uint8Array(s.length);%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20s.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20e%5Bi%5D%20=%20s.charCodeAt(i);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20e;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20if%20(typeof%20(TextDecoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextDecoder%20=%20function%20TextDecoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E (0)
[electron] [6944:0924/095549.592:ERROR:CONSOLE(0)] "Blocked script execution in 'data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%230000...%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%23000000%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22apple-touch-icon%22%20href=%22/logo192.png%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22manifest%22%20href=%22/manifest.json%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.googleapis.com%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.gstatic.com%22%20crossorigin%20/%3E%0D%0A%20%20%3Clink%0D%0A%20%20%20%20href=%22https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%22%0D%0A%20%20%20%20rel=%22stylesheet%22%20/%3E%0D%0A%0D%0A%0D%0A%20%20%3Ctitle%3EVisitik%20Control%3C/title%3E%0D%0A%3Cscript%20defer%20src=%22/static/js/bundle.js%22%3E%3C/script%3E%3C/head%3E%0D%0A%0D%0A%3Cbody%20class=%22h-screen%20m-0%20overflow-hidden%22%3E%0D%0A%20%20%3Cdiv%20id=%22root%22%20class=%22h-screen%22%3E%3C/div%3E%0D%0A%20%20%3Cscript%20src=%22websdk.client.bundle.min.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20src=%22fingerprint.sdk.min.js%22%3E%3C/script%3E%0D%0A%20%20%3C!--%20%3Cscript%20src=%22https://polyfill.io/v3/polyfill.min.js?features=Symbol%252Cfetch%252CString.prototype.endsWith%252CObject.assign%252CArray.prototype.findIndex%252CArray.prototype.includes%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20type=%22text/javascript%22%20src=%22modules/websdk/index.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20id=%22TextEncoder-shim%22%3E%0D%0A%20%20%20%20if%20(typeof%20(TextEncoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextEncoder%20=%20function%20TextEncoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextEncoder.prototype.encode%20=%20function%20(s)%20%7B%0D%0A%20%20%20%20%20%20%20%20const%20e%20=%20new%20Uint8Array(s.length);%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20s.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20e%5Bi%5D%20=%20s.charCodeAt(i);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20e;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20if%20(typeof%20(TextDecoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextDecoder%20=%20function%20TextDecoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E (0)
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<title>Visitik Control</title>
</head>
<body class="h-screen m-0 overflow-hidden">
<div id="root" class="h-screen"></div>
<script src="websdk.client.bundle.min.js"></script> <--Blocked
<script src="fingerprint.sdk.min.js"></script> <--Blocked
</body>
</html>

How to create a popup modal in react js and position it close to the modal

i'm new to react JS i wanted to make a popup modal when i click on some button but i want it to position itself close to that button that i clicked ! i used the portal method but that won't position it close to the button so you will have to position it your self but it won't be a good practice ! so i there any other way to do it ? ! and also when the modal popup i want to close when i click on anywhere on the screen not including it self !
PORTAL METHOD :
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
const Popup = (props) => {
if (!props.open) {
return null;
}
return (
<Fragment>
{ReactDOM.createPortal(
<div
className="popupContainer"
style={{ position: "absolute", top: 0 }}
>
<h2>ghhhh</h2>
</div>,
document.getElementById("popup")
)}
</Fragment>
);
};
export default Popup;
<div className="btnContainer">
<button
className="btn btn-primary"
onClick={() => {
setOpen(true);
}}
>
Show modal
</button>
<Popup open={open} />
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Redux App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="popup"></div>
</body>
</html>

ReactJS Error: Target container is not a DOM element

I am making a simple TODO App using MERN Stack. But can't able to run because of above mentioned error i.e. Target container is not a DOM element. I checked out whole code but can't able to find its cause or solution. This are the problems. Please help here.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import {BrowserRouter as Link, Router, Route} from 'react-router-dom';
import TodoList from './components/todo-list';
class App extends Component
{
render()
{
return(
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a href="/" className="navbar-brand">
<img src={logo} alt="Logo" height="40" width="40"/>
</a>
<Link to="/" className="navbar-brand">MERN Stack TO-DO App</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="myNavBar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="myNavBar">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/" className="nav-link">Todos</Link>
</li>
</ul>
</div>
</nav>
</div>
<Route path="/" exact component={TodoList}></Route>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
this going to render the React app in a div with id root
and in your html file you have a div with class root and no id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
give the div id root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div id="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

How to add a dynamic favicon in a nextjs app on a dynamic route

I want my nextjs app to have a different favicon based on the route.
This is the working application where I want to implement this. I want the favicon to become the countries flag whenever someone goes to that countries page.
I have the following code in my react components Head tag:
<Head>
<title>{country.name} | {country.subregion}</title>
<link rel="icon" href={country.flag} />
</Head>
This works sometimes but most of the times the favicon is not updated or the previous favicon stays.

One issue that I had was that your <link> element must be a direct child of next.js's <Head> element. This means you cannot have a <Favicon> React element that internally renders a <link> element. Instead you should call your <Favicon {...props}> React element as a function as shown below:
<Head>
{Favicon({...props})}
</Head>

Something similar happened to me.
Thats my solution.
In href, navigate to file folder.
import Head from 'next/head';
export default function MyPage() {
return (
<>
<Head >
<link rel="icon" type="image/x-icon" href="../../file.svg" />
</Head>
<div>Something...</div>
</>
)
}

What you can do is catching the pathname on the client side in a favicon component that just swaps the favicon src based on the route. what you would end up with would be kind like the following:
app:
import { useRouter } from "next/router";
import Favicons from "../components/favicons";
const App = ({ Component, pageProps }) => {
const router = useRouter();
return (
<>
<Head>
<meta charSet="utf-8" />
<Favicons currentRoute={router.pathname} />
</Head>
<Component {...pageProps} />
</>
);
};
and then in the favicons component something like this:
const Favicons = (currentRoute) => {
switch (currentRoute) {
case "variant-1":
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/[version]/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/[version]/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/[version]/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/[version]/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/[version]/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/[version]/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
case "variant-2":
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/[version]/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/[version]/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/[version]/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/[version]/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/[version]/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/[version]/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
default:
return (
<>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
}
};
export default Favicons;
Then again, no clue if ya still got relatable issues but hope this helps ya!

Loading JavaScript files using Helmet not working

I am trying to use Helmet to load javascript files but it does not seem to work. I tried various paths like './vendor','../vendor' '/vendor' and it did not work. Here is what I have. Thanks a lot.
function DashboardLayout(props) {
return (
<Fragment>
<Helmet>
<title>Dashboard</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta name="robots" content="noindex" />
<script src="./vendor/jquery/jquery.min.js" type="text/javascript" />
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript" />
<script src="./vendor/jquery-easing/jquery.easing.min.js" type="text/javascript" />
<script src="./js/sb-admin-2.min.js" type="text/javascript" />
</Helmet>
{props.children}
</Fragment>
);
}
and the folder directories.

Categories

Resources