So now we want to get our entered text here from the new to do component to the app component.
Why to the app component.
Because that is our component that has a direct link to both the new to do as well as the To Do List
component.
So here I want to add a new function and I'll name it to do ad handler.
The name is up to you.
I'd just like to use that convention of having handler at the end if it's a function that triggers upon
an event.
And in here I expect to get the text as a string.
It's our function so we can expect this and then want to add this as a to do here.
Now of course since you know react you know updating disarray alone won't do the trick.
This won't re rendered its component so we'll have to use some state management here to make this work
before we do that.
However let's make sure that we at least get the value to this function.
So let's lock the text here and then we can focus on its state management part as a second step to get
that here.
We need to make sure that this to do add handler function can be called from inside the new to do component
because that is where we do at the to do in the end.
Now how do we make this function here callable from inside this component.
We pass a pointer at this function to that component.
So here we could add a prop which we name on ad to do.
And you can name it however you want.
I just name it like this because this basically will happen upon any event and event which we control
of course but still.
And here I want to forward to do ad handler.
So I pass a pointer at this function.
I'm not executing it here.
I just pass a pointer to dysfunction into on ad to do so that instead of new to do on props which we
can get here we can call this so that we can call props on ad to do here and forward the entered text.
That's the idea.
But of course typescript doesn't like this because it doesn't know that there will be on ad to do prop
on our props here.
And how is such a prop would look like.
So just like a To Do list we have to set up a interface or simply a type definition of our props.
So let's go to new to do and maybe again add a interface.
You could also add a type of course and I will do that here to mix things up.
I typically would always go for interface but using a type is also fine.
So to use a type here we can name it new to do props and the type is an object type where I want to
have on add to do prop and design turn will be a function type it will point at a function you define
function types like this as you learned it will be a function that doesn't return anything but which
expects one parameter and that will be the text the user entered.
So the two do text which is of type String that's what this function expects.
Now let's set this on this generic type here and point at Newt to do props.
And with that we can call on ad to do and pass in the string and if it would try to pass in a number
you for example we of course would get an error because we clearly defined that the argument has to
be a string up there.
So let's revert this with that if we enter a new goal again finish it in one month we again see our
log here but now it's coming from the app component as you can clearly tell because we add a does log
here.
So does communication between the new to do component anti app component here works.
And with that let's implement some state management here.
And again this is all something you can try on your own first if you want to to make sure that you render
to dos in state so that whenever we update our to do is we also re rendered this component.
Let's do that in the next lecture.