Let's make sure that we can set a value inside the editor and also eventually get some text out of it
as well.
So naturally, as soon as the user starts writing code inside there, we need to detect that and we
need to get that value out and eventually try to bundle it and whatever else.
OK, so the first we want to focus on is how we can somehow get a value into the ed. How do we kind
of show some code inside there?
If we have some code already when we create the ED itself, what we can add in a value prop this thing,
we can send it to a string and then provide whatever code we want to show in there.
By default, maybe const eight equals one or whatever else.
It's going to save that.
Look back over and there we go, there's our default code now, there's a little gotcha here, something
that's just a little bit tricky if we were making a text area or a text input.
Remember, the value prop is essentially saying this is exactly what the value of that text input should
be at all times.
And so you might think that is how this Monaco editor works as well.
But it's not a much better or more descriptive name for this prop would be initial value.
That's what this really is.
They don't call it initial value, but it really is an initial value.
The value prop is only used to initial initialize the value inside the editor after it is initialized,
after it gets set up and is initially displayed inside the editor, that is it.
Value does not get used anymore.
You can almost imagine it falls off the face of the earth.
So again, a much better name for this prop would have been initial value to just keep that in mind.
And naturally, we probably don't want to always hard code the initial value or the editor instead we
might want to receive this initial value as a prop to our component.
Let's define an interface to describe all the props that our component is going to receive.
We're going to say that it's going to receive some kind of initial value prop will then take that and
provide it to this value prop.
So at the very top, I'm going to add an interface code editor props.
I'm going to say that if you want to show our code editor component, you must provide an initial value
and that must be a string.
And then going to annotate the type of art component right here, so I'm going to put on a Colen react
dot functional component or F.C. and then inside of some angle brackets, I'll put in code.
Ed, props, so just a little bit of typescript here, this is telling our typescript compiler that
we are going to provide or assigned to code editor a react component that is going to receive any props
that matches this interface.
So we cannot receive that initial value prop and then we're going to pass it directly through to value.
And that's it.
Before we try to test this out instead of a browser, I'm going to go back over to my indexed TSX file
back inside of our app component.
Here's the code editor.
We're now getting an air from it because we need to provide an initial value property.
The back over here we can now put in.
An initial value of whatever you want to put in.
We'll save that as well.
Now, if we refresh, yep, there is our initialised code editor.
OK, Alex, good, what we are now able to put in some initial value to the editor now, the next obvious
thing we need to do is make sure that we detect any time a user changes the value inside the editor.
And whenever they do, we're probably going to want to maybe call some callback that is provided to
our component to tell the app that the user just changed some code or something similar to that.
We'll take care of that step in just a moment.