What i want is when i click on button the React component should re-render
And i also Don't want to re-Render the complete webiste on this particular component has to re-render
It tried using hooks to re-render the page but it gives me error as shown above and also tried using
forceUpdate()Hook but that still gives me the same error
re-Render the component
This is the javascript of same file
const LeftCard = ({ cardData: cardComponent, getFileName }) => {
let emptyArr=[];
let pageNo=10;
const [loadComponentByPage,setPageArr]=useState(undefined);
if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}
pageNo<10?pageNo=10:''
pageNo===10 ? pageChange(0):null
function pageChange(num){ <-------- This function is getting called on button click
if(cardComponent !==undefined) {
const mainArray=cardComponent.sort((a,b)=>b.id-a.id).map(val=>{return val});
const arrayLength=cardComponent.length;
if(pageNo===10 && num===-10)return;
if(arrayLength<pageNo && num ===10)return;
pageNo+=num
emptyArr=[]
for(let i=pageNo-10;i<=pageNo;i++){
if(mainArray[i]!==undefined){
emptyArr.push( mainArray[i])
}
}
}
}
if(loadComponentByPage ===undefined )return
This is jsx of same file
return (
<div>
{loadComponentByPage.sort((a, b) => (a.id - b.id))
.map((element, i) => {
return (
<div key={i}>
<span className="image-overflow flex ">
<img className="left-sec-image ml2 link Dim" src={element.image} alt={element.topicname}></img>
<div>
<h4 className=" ml4 mr2 light-purple">{element.topicname}</h4>
</div>
</span>
</div>
);
}).reverse()}
<div>
<div className='ml5'>
These are the button that calling the function-------> <button className='ml7' onClick={()=>{pageChange(-10);doNothing()}}><ArrowBackIosSharpIcon /></button>
These are the button that calling the function-------> <button className='ml6' onClick={()=>{pageChange(10);doNothing()}}><ArrowForwardIosSharpIcon /></button>
</div>
</div>
</div>
)};
export default LeftCard;
The problem you are having is that you've created an infinite loop of renders.
It's a common pitfall in React and is something to look out for.
In React, a component re-renders whenever one of these 2 cases occurs:
So what happens is the following:
pageNo is 10, which is "truthy".if block and setPageArr is called, thus setting the component's state.pageNo is still 10, so we enter the if block and set the state again.And this cycle repeats, creating an infinite loop.
Typically, when faced with an infinite loop, the browser would freeze and ultimately crash.
The error you are getting is due to React "catching" the problem and preventing the freeze.
To fix it we have 2 options:
Example:
const [loadComponentByPage,setPageArr]=useState([]);
useEffect hook.Example:
useEffect(() => {
setPageArr(emptyArr)
}, []) // A `useEffect` hook with an empty dependency array should run only once when the component mounts.
Either way, this bit needs to go -> if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments