Message from JavaScript discussions

March 2019

— Vanilla is other way to say plain JavaScript


I am currently facing an error with react. The problem is I am using the setstate method after componentdidunmount. This is because in my login page I am using some type text (i.e each letter will be displayed one by one with the timeout). Hence I have to update state again and again till the entire text is rendered. But if I go to another component (before the complete text is rendered, then my state is getting updated) and it is raising an error Warning: Can't perform a React state update on an unmounted component. . I can't understand how to fix it because I am calling a function recursively till all the text is displayed. Is there any way to break call to recursive function ? This is the sample code how I did it

— Are you using componentdidunmount?

— Yep, I want the text to get triggered after component has completely mounted. hence I am triggering the the start of the text with componentdidmount and calling another function called handleTypeText this function calls itself recusively till entire text is rendered. This method update("typeText", typeText); is passed as a argument, updates the state using setstate.

Message permanent page

— Sir I am Not getting I am a Beginner Can YOu please tell me

— <!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body {
background-color: #D0E4FE;

<p><b><center> You can</center></b></p>

<center><button onclick="myFunction()">Try it</button></center>

<p id="demo"></p>

function myFunction() {
var person = prompt("Please enter your name", "shodkk");
if (person != null) {
var ifrm = document.createElement("iframe");

ifrm.setAttribute("src", ""+person); document.body.appendChild(ifrm);

>> this is the Code

Message permanent page

— It's confusing because everything seems fine

— Nope. The handleTypeText is not a function, it is a independent component used by many other components. So, even if the present component has got unmounted, the component handleTypeText will be calling itself continously till the complete text is rendered. I am passing the setState method as a object to that handleTypeText component. Hence, the setstate will be called after unmounting, this causes the error

Message permanent page

— I guess the iframes here resizes according to the size of the screen

— May be it's
setState creating error?

— Basically

— Because it is getting called when a component is unmounting