I am trying to render the TEXT CLOUD in my Nextjs app, but it is getting rendered infinite time.I am using Next JS. Please help Here is the code and screenshots:
import dynamic from "next/dynamic";
import { useRef} from "react";
const container = '.tagcloud';
const texts = [
'3D', 'TagCloud', 'JavaScript',
'CSS3', 'Animation', 'Interactive',
'Mouse', 'Rolling', 'Sphere',
'6KB', 'v2.x',
];
const tag = {
radius: 100,
maxSpeed: 'normal',
initSpeed: 'fast',
direction: 135,
keep: true
}
const Text_cloud=dynamic(
() => {
const refTag=useRef();
return <span ref={refTag}>{TagCloud(container,texts,tag)}</span>;
},
{ ssr: false }
);
export default Text_cloud;
I am exporting this Component and using it in another page skills:
import React, { useState,useRef } from "react";
import Web from "../Component/web";
import Programming from "../Component/programming";
import Editing from "../Component/Editing";
import styles from "../styles/skill.module.css"
import Btn from "../Component/btn";
import Text_cloud from "../Component/text_cloud";
function Skill() {
const [skill, setskill] = useState("Web")
return (<>
<div className={styles.main}>
<ul className={styles.ruler}>
<a onClick={() => setskill("Web")} className={styles.skilla}><Btn name="Web Dev" /></a>
<a onClick={() => setskill("Programming")} className={styles.skilla}><Btn name="Programming" /></a>
<a onClick={() => setskill("Editing")} className={styles.skilla}><Btn name="Editing" /></a>
</ul>
<div className={styles.cld} >
<div className="tagcloud" >
<Text_cloud />
</div>
</div>
</div>
{skill === "Web" && <Web />}
{skill === "Programming" && <Programming />}
{skill === "Editing" && <Editing />}
</>)
}
export default Skill;
After running the server I get this output and error: It get render two times
And the error it shows is: Here is the error Screenshot
Please help me out here