So what about submitting this? The submit button of course is in our header and therefore you learned
how you can connect header and component,
we do that with the help of params.
So I'll add a new function here in the edit product component,
submit handler could be the name and in there in this function, I want to do whatever needs to be done
to add a product or update it,
so we need to dispatch some Redux actions.
For now, I'll just console log submitting here so that we see that this executed.
Now we need to pass that submit handler to our params and we can do that with the help of use effect
here which I showed you earlier already and also with use callback and we wrap our function here with use
callback
and of course this function has no dependencies right now,
so we can just use it like this. This ensures that this function isn't recreated every time the component
re-renders and therefore we avoid entering an infinite loop
and now we can execute use effect here to execute a function after every render cycle
and here, our dependency is submit handler which never changes
which means right now this only executes once which is great because then we can set params here, pass in
an object where we bind submit as a key to the submit handler. Now submit is a parameter which we can
retrieve here in our header, our submit function can be fetched from nav data.navigation get param submit,
that's the key I just set up in the set params call and submit function is therefore what should be
executed when this button is pressed, so I'll just point onPress to that submit function at the end.
Now right now one little change is also required, use callback like this would actually recreate it every
time this re-renders, we need to pass in that second argument which should be an empty array, now this
function will never be recreated and now we avoid an infinite loop.
So now if we go to the admin screen, go here and click this button, you actually see submitting here and
that works therefore as it should.