We've now initialized our ESKILD service, and there's just one problem, we have initializes service
inside of the START service function.
So we've got this service variable right here.
We want to get access to the service and use it to actually do some transpiring and eventually bundling
over inside of unclick.
So in other words, we want to get that service thing available or accessible inside this function.
To do so, we've got two possible solutions.
We can either create a new piece of state and use that piece of state to share the service throughout
this entire component.
Alternatively, we could instead use a ref.
Now, you might be familiar with refs in react and you might be very much used to using them to get
a reference to a react component.
It turns out that you can actually use a ref to keep a reference to any kind of JavaScript value inside
of a component, not just to a component itself.
Let me just give you a very quick example, because once you see this code, everything gets a little
bit more obvious.
I'm going to first begin by going up to my react import statement.
And I'm going to import the U.S.
Hook.
Then inside of my component, I'm going to create a new roof that I'll call simply ref.
We are working with typescript here, so we should assign a type to this ref.
We're going to do so by putting in a set of brackets.
And right now I'm going to mark this things type as any.
That means that refought current can refer to any type of variable.
Then down inside of start service, remove the console log.
We don't really need that anymore.
I'm not going to assign our service to a service variable anymore.
Instead, I'm going to assign the service to ref, not current.
So now, after calling start service, we can refer to refought current anywhere inside of our component
and that will give us a reference to the service we created through E build.
And we can use that to then do our transport and bundling and all that kind of stuff.
So now inside of our unclick function.
I'm going to first add in a little check and make sure that we never attempt to do any transpiring unless
we are 100 percent sure that we have already initialized our service.
I can say if there is no current, if that value is undefined or null and just return early, that's
going to handle the case in which a user might start up our application and then instantly start clicking
on that submit button.
They click on it right away before our service is ready.
We would definitely end up with an error message.
Then after that, right now, let's just do a council log of refought current and make sure that we've
actually got access to the build stuff inside of your.
We're going to see this go back to my browser refresh, and now if I click on Submit, I'll see a log
of that service.
So there are the same build and transform functions that we want to get access to.
Let's say this looks pretty good now we can use that service, we can call transform pass in whatever
text the user entered into the text area and then show the result down inside that element.
That's wire up this very last step in just a moment.