Let's add some logic
to the EventsSearch component.
We get this form,
but at the moment when this button is pressed
and the form is submitted,
we're not doing anything with that submitted data.
And that should change.
Therefore, I'll start by adding a nested function
in the EventsSearch component
and I'll name this function submitHandler.
That's the function that should be triggered
when the form is submitted.
So, on the form element,
we can add the onSubmit prop
and point at submitHandler like this.
Don't execute it, just point at it.
So, that submitHandler is executed by react
when the form is submitted.
Now, as you know, for example, from my react course,
we automatically get an event object here,
because we're listening to a default Dom event.
And here we should call event dot preventDefault
to prevent the browser default off sending an http request
which I don't wanna do here
and which would reload our page
and therefore lose all our applications state.
Instead, I wanna handle this submission with JavaScript
and therefore we prevent that default.
And once that is prevented,
we can now read the selected year and month.
Now for that, we could set up two way binding
with use state and so on,
but since I'm only interested in the values once
when the form is submitted,
I'll instead work with refs.
Another key react feature which you should be aware of.
If you're not, definitely take a react refresher,
or take my react to complete guide course,
where I dive into all react concepts in great depth.
So, here we'll then import useRef from react,
and then we can set up our refs here
and we'll need two refs since we have two inputs.
We'll have the yearInputRef
and hence I'll create my first ref with useRef
and the monthInputRef.
And hence here I'll create this as well.
And now that get these two refs created,
we need to connect them to select elements.
So, on the year select element,
I'll add to the special ref prop
and point at the yearInputRef,
and on the month select element,
I'll also add the ref prop and point at the monthInputRef.
Now, the refs are connected
and therefor now in this submitHandler,
we can get the selectedYear
by accessing yearInputRef dot current.
You always use dot current to get access
to the actual value the ref is connected to,
so, in this case to the select element.
And then since this gives us access to the select element,
so, to the JavaScript object representing
that select element,
we can access the value property,
which every select JavaScript object has.
So, every JavaScript object,
representing a select element has a value property.
Therefore, we can access this here
to get access to the selected value.
And we repeat that for the selected month.
So, with monthInputRef dot current dot value,
we get access to the selected value
on the month select element.
And now we just need to kind of do something
with those values.
And I don't want to utilize them here in EventsSearch,
even though we could do that,
but instead I want to pass them to my AllEventsPage.
And in there, I then want to programmatically navigate
to that slug page here.
And here we need programmatic navigation
because you wanna do that once some action completed.
In this case, once the form submission completed
and we extracted all the form values.
So, that's a typical example for programmatic navigation.
Hence as a first step,
I do expect that on the props
of this EventsSearch component,
I have a prop let's say named onSearch.
This name is up to you
but I'll name it onSearch following this convention
because I expect that onSearch,
the value for this prop is a function,
which I therefor can execute here.
And it should be a function which accepts two parameters,
the selected year and the selected month.
So, I'll call this function and now we need to make sure
that such a function is passed
into EventsSearch through the onSearch prop.
So, in this index JS file in the events folder,
so therefore on the AllEventsPage.
We now need to set up this function here.
Here we need to add a new function in this component.
The findEventsHandler function, for example,
which expects a year and the month in this order
because that's how I'm then calling this function here.
We're calling this function and we're passing in a year
as a first argument and a month as a second argument.
Hence, that's what I expect here.
And then we do something with that.
And it's now this function which is passed
to the EventsSearch component through the onSearch prop
which we just use in there.
So, here I then pass at findEventsHandler.
We don't execute it here.
We just point edit.
So that it's executed for us,
by this EventsSearch component here
with this line of code,
after the form was submitted and we extracted our values.
So, then here findEventsHandler will execute.
And in here we now want to programmatically navigate.
So for that, we can import useRouter
from next slash router like this,
and then call useRouter here outside
of this inner function directly in the component function.
All react hooks need to be called directly
in your component function,
not in any nested block statements.
And that gives us access to the router like this.
And on this router inside of the findEventsHandler,
we can then call push to go to a different page.
That's what you also learned in the previous course section.
Now I'll construct the fullPath I wanna go to here
with a template literal,
and the fullPath will be slash events slash
and now to dynamic segments so
that we reach this slug here.
And the first, the dynamic segment will be my year
and then slash,
and then the second dynamic segment which is month.
Now, just to be clear,
we could have more as segments here,
and this slug route would still be triggered.
It simply consumes an unlimited amount
of segments after slash events.
If we only have one segment, slug will not be triggered
because we have a more specific route folder
with the eventId file.
And next JS is pretty smart about that.
And it sees that for one argument,
for one dynamic parameter after events,
we have a specific page,
but for two or more we have no specific pages
and therefore then this slug will kick in.
So for this path will reach the slug page here.
And therefor, that's the fullPath I wanna navigate to.
With all that if we now save this,
if we now select, let's say May, 2021
and I click on Find Events,
we are taken to slash events slash 2021 slash five,
which is May, 2021.
And we are on that Filtered Events page.
Just as expected.
So, now as a last step before the final polishing,
let's now load the proper events for this filter criteria.