So we got our first component added let's add a second one new to dodge.
He is X is a file name in there of course we import react from react and you could of course also build
class based components.
This is also fully supported but I will use this modern functional components only style.
So here again we have a function which will make up our component later and I export new to do as my
default and let's add a type assignment and let's make it clear that this will be of type function component
and therefore of course here we are missing some returned J is X code.
So here I will return a form where I want to add all the controls I need to allow the user to add and
you to dos.
Now let's add does new to do component in the app component.
So in here we can import new to do from dot slash components new to do and simply added here instead
of to comment new to do as a self closing component because right now we are not passing anything between
the opening and closing tax.
And we also don't have any props here at the moment at least.
So instead of does component we can now add a input and also thereafter a button.
So add a diff here actually in which I want to have a label with aged him out for attributes to point
at let's say to do text does all just mark up here where I say to text and then input element of type
text with an idea of to do text so the label and the input are connected correctly semantically and
below that if you're inside of the form I'll add a button where I say add to do and that button should
be of type submit so that it well submits the form this is now a very basic form which we can use to
add a new to do.
Now let's make sure that this works and for this we actually have a couple of different steps we need
to apply we need to get whatever the user entered here and we then need to forward what the user enters
here to the app component because that is where we will manage our to dos later.
So first of all let's react to a form submission maybe we can add a new function.
So a function in the functional component.
But dad will now be a regular function which will name to dos submit handler any name you want.
This is a function which should fire whenever this form is submitted so we can bind it to the on submit
prop here in the end to do is submit handler don't execute it just point at it so that it's executed
for us whenever this form is submitted.
Now in here we get an event object and the event object is of type react stored form event now dear
I want to call event prevent default to prevent debt default which is to send a real request to the
server that's serving this app.
That's of course not what I want to happen.
I want to handle this request only here in JavaScript and therefore does browser default has to be prevented.
Now with that prevented we can get whatever the user entered into the input and for this we got two
different ways we can ever manage to State of the input here kind of with two way binding or we use
a ref a reference to extract what the user entered here when the form is submitted.
I will go for the latter approach because we'll see state management in action in the app component
in a second.
Anyways ways to set up such a ref.
We import the use ref hook from react and hooks are in special functions which you can execute and function
components to add certain functionalities to the component.
And when we execute use ref here what we get back is a ref object which we can store in a constant and
I'll name it.
Text input ref actually and we can for example use such a reference to assign it to a DOM element and
then interact with that DOM element from insert our code up here.
So for example when that form gets submitted we set up such a connection by adding the special ref prop
to any H2 male element of your choice and point at that object we created up here so add text input
ref this creates a connection here.
However you see already again typescript doesn't like this because use ref turns out to be a generic
function as well.
Now which type could we pass to it.
What would be interesting to know here.
Well it would be interesting to know which kind of data will be stored inside of that ref.
And since you point at the input element will have a h to male input element stored in their now we
all just have to provide a default value to the ref when it's getting setup and data will provide null
because then the component gets rendered for the very first time when this code executes of course does
hasn't been rendered down there.
So then this will not point at anything.
Once this has been rendered however the connection will be established and then this ref will work.
And now here in the to do submit handler we can get the entered text by using text input ref dot current.
That's always something you need to enter when you work with a ref dot value of course here because
we work with the H team l input element.
However here the problem is that this could be null.
It's a problem we know already.
We had this early in the course as well when we selected something in a dorm and we have it here as
well because types who can't know with certainty that disconnection is established.
We know it.
We wrote to code but typescript unfortunately doesn't understand that we do establish a connection down
there.
So to fix this we can add exclamation mark here to again tell typescript that this will be fine that
this will be set and we're good by the way it what is correct.
If we would call to do submit handler here this would be called the Ford as was rendered for the first
time and then indeed this wouldn't be initialized yet.
We only know that it will be initialized with certainty because we know this will only be called when
the form is submitted and that can only happen after this has been rendered so we know the way our code
works.
This will never be null if there would be some other possibility you would have to use it if check here
to check if text input ref thought current is null and if it is do something else but here.
This can't happen.
So with that we're extracting value and we can console locked us here to see where it works.
But of course this is not the final set up then so let's save this.
Let's enter here.
Finish it in one month and add to do and we see it here in the console logs.
That is working the way it should.
And with it working the way it should.
Let's now make sure we get that value to the app component.
If you know some react definitely try it on your own first we'll do it together in the next lecture.