The last thing I want to show you around props is how we can receive other types of values as well.
So inside of child props right here, let's say maybe we want to communicate down some additional kind
of prop, like a callback function.
Maybe our child components have buttons inside them.
And we want to tell the parent component about whenever a user clicks on those buttons.
So let's try first adding in a button element to child and child as F.C..
I'm going to first begin by giving myself just a little bit of space.
I'll then add in a button.
Like me.
I'll add on a unclick prop and then we'll assume that we're going to receive some kind of unclick prop.
I'm going to put in unclick like so I'm going to copy that button.
Down to the second component as well.
Now, I'm going to make sure that I try to structure out of our props, object some kind of unclick
function or put in unclick.
And on Click right away, we, of course, get an error message because child props is not expected
to ever have any kind of on click property.
So to fix that up, we could very easily go back up to our interface, add in on click, and then say
that this should be some kind of function because it's an unclick kind of callback.
We might not want to have any kind of arguments that maybe it might not need to return any kind of value
either, but might annotate its return type is void, which just means I do not really expect to get
back any kind of usable value from unclick.
So if we save that, we can now very easily see that we've got an air coming from parents if we go back
over there, not unsurprisingly, we've got an air from child right here that says we have to provide
an unclick prop.
We could very easily put in unclick.
But in a function and maybe if right now, just to a console log that says looked like so.
And that appears to fix the Arab.
All right, so again, just a very quick example of how we can add in other types of values to a proper
interface definition.
The very last thing I was going to cover that in the next video because but because this one has been
very fast, let's just go over this one last little topic.
You might recall that we have these two different types of ways of associating a props interface with
a component.
So this is kind of method one right here, which was a little bit easier and faster to put together,
but has some downsides.
And we've also got method to down here as well.
There's one other benefit to method number two down here that I just want to mention very quickly.
Back inside of my parent component, I'm going to find where we currently are defining that child component
right here.
And I'm going to expand this thing to have both an opening tag and a closing tag as well.
Now, as soon as I do that, you'll notice we start to get an error message.
The error message, if you mouseover says.
This right here, that is the arguments, the props we are providing to the child component is not assignable
to something, something, something.
And it says specifically property children does not exist on type something, something, something.
A quick reminder on what really happens when you write out a custom component using an opening tag and
a closing tag as well.
If you put any content in between these two tags right here, you get some kind of text or some kind
of component, let's say maybe some component called app or something similar, all that content will
be provided to your component as a prop called Children.
This is an automatic feature in react.
This has nothing to do with TypeScript or anything like that.
So if right now I'm going to just put in some arbitrary text like that right there.
So, again, by default, this text right here would show up inside of our child component as a prop
called Children, and the reason we are seeing an error, because our child definition right here says
that we are going to receive some type of child props.
And there's no mention inside of fear whatsoever of any kind of children prop or anything like that.
So whenever we make use of child right now, the expectation, according to the interface we put together,
is that there will never be any children whatsoever.
Right now we are providing the children.
And so naturally we end up with an error message.
The nice thing about using this second form of definition or type annotation for a functional component
is that it automatically takes into account that idea of receiving children.
Let me show you an example of this.
Back inside of parents, rather than trying to import child right here, I'm going to import our other
component, which we called child as F.C..
On an update, our.
And then you'll notice, oh, I need a capital C on there.
My mistake, you'll notice that your message goes away very quickly.
That is because Child C, which is annotated using this react functional component interface, does
in fact expect to receive eight children from now.
We could receive children.
On our list of properties right here, and we could place children somewhere inside of our component
like so and we get no airs whatsoever, so that is another upside to using this approach.
You can define components that will receive children if you use the first approach.
You cannot directly receive children unless you manually add an annotation to your interface right here,
so we could have added in something like children and then put in some kind of typewrite there to say,
hey, we do expect to receive children.
But of course, that does require just a little bit of extra work.
All right, so we've now seen some upsides and downsides of both approaches now that we've seen and
gotten a pretty good idea of how we can annotate props with TypeScript and react.
Let's move on to our next major topic in the next video.