Our applications looking great, but there is one last little problem I want to show you before we move
on.
Let me first give you a quick demonstration of what is not quite right and we'll figure out a way to
fix it.
So to help you understand what is wrong right now, I'm going to go to my element tab.
I'm going to do my element, inspector, and then take a look at the iFrame.
So here's the HTML document inside the iFrame, I'm going to expand html expand body and there is that
div with ID root right there.
So remember, we put that element in there just for utility purposes for our users, just so they would
have a place to render something like a react element or whatever else they want to show inside the
dome.
So now here's a little problem, something that I want you to see that is entirely possible to happen
in the real world.
Let's imagine for a second that a user, for whatever crazy reason, who knows why does something like
document autobody in our HTML is empty string.
If I run that, that is going to delete everything inside of the body element inside of our iFrame.
Let's imagine that the user runs that code right there and then they say for whatever reason, oh that's
not what I meant to write, what I meant to write something that would create a react component and
then show that inside that did with its root.
Let's imagine the user then runs this code right here.
So we're going to take this code as usual.
We're going to transpire, bundle, push it down into that iframe.
Let's try that right now.
A click on submit and if I open up my console, I'll see a nasty error message.
Cannot set property in HTML of No.
So what is going on here.
Well, right now, whenever we submit our code, whenever we bundle it and push this code into the iFrame,
we are not resetting the contents of the frames HTML document.
So whenever we execute code, we are reusing the exact same HTML structure as the last one.
So when I ran this code right here, there is no document or no div inside there with an idea of root
because I deleted it during the previous run.
This is not at all how just about any kind of online code execution tool works instead just about every
single code execution tool out there.
Make sure that after running your code, before executing it again, after you make some change or whatever
else before Acción, your code again, it resets the entire HTML document.
It dumps all global variables.
It dumps anything tied or any properties you tied to window.
Essentially, it's equivalent to a full refresh of the contents of that iFrame.
So we need to make sure that we do something very similar.
We need to make sure that maybe right before we try to execute a user's code.
Some other words.
Right when they click on submit right there, we need to somehow reload this entire iFrame and make
sure that we get some fresh HTML inside there so that a user is going to always have a very consistent
environment and to make sure that we don't get any kind of leakage of variables or state or anything
like that between different executions of their code.
OK, so that's a little thing we need to fix the last little thing around code execution, let's figure
out some kind of solution for this in the next video.