1
00:00:02,300 --> 00:00:07,850
So what about submitting this? The submit button of course is in our header and therefore you learned

2
00:00:07,880 --> 00:00:10,460
how you can connect header and component,

3
00:00:10,460 --> 00:00:12,230
we do that with the help of params.

4
00:00:12,380 --> 00:00:15,980
So I'll add a new function here in the edit product component,

5
00:00:16,220 --> 00:00:23,320
submit handler could be the name and in there in this function, I want to do whatever needs to be done

6
00:00:23,320 --> 00:00:25,270
to add a product or update it,

7
00:00:25,330 --> 00:00:27,700
so we need to dispatch some Redux actions.

8
00:00:27,700 --> 00:00:34,160
For now, I'll just console log submitting here so that we see that this executed.

9
00:00:34,270 --> 00:00:40,530
Now we need to pass that submit handler to our params and we can do that with the help of use effect

10
00:00:40,540 --> 00:00:48,640
here which I showed you earlier already and also with use callback and we wrap our function here with use

11
00:00:48,640 --> 00:00:49,700
callback

12
00:00:49,750 --> 00:00:52,360
and of course this function has no dependencies right now,

13
00:00:52,360 --> 00:00:57,370
so we can just use it like this. This ensures that this function isn't recreated every time the component

14
00:00:57,400 --> 00:01:00,720
re-renders and therefore we avoid entering an infinite loop

15
00:01:00,880 --> 00:01:06,890
and now we can execute use effect here to execute a function after every render cycle

16
00:01:07,090 --> 00:01:10,510
and here, our dependency is submit handler which never changes

17
00:01:10,510 --> 00:01:16,240
which means right now this only executes once which is great because then we can set params here, pass in

18
00:01:16,240 --> 00:01:25,670
an object where we bind submit as a key to the submit handler. Now submit is a parameter which we can

19
00:01:25,670 --> 00:01:38,000
retrieve here in our header, our submit function can be fetched from nav data.navigation get param submit,

20
00:01:38,420 --> 00:01:43,880
that's the key I just set up in the set params call and submit function is therefore what should be

21
00:01:43,880 --> 00:01:50,720
executed when this button is pressed, so I'll just point onPress to that submit function at the end.

22
00:01:50,730 --> 00:01:55,770
Now right now one little change is also required, use callback like this would actually recreate it every

23
00:01:55,770 --> 00:02:00,180
time this re-renders, we need to pass in that second argument which should be an empty array, now this

24
00:02:00,180 --> 00:02:04,170
function will never be recreated and now we avoid an infinite loop.

25
00:02:04,170 --> 00:02:12,220
So now if we go to the admin screen, go here and click this button, you actually see submitting here and

26
00:02:12,220 --> 00:02:13,690
that works therefore as it should.