In the last section we got our employee list working so we can see all the different employees we've
created for our app.
We should of course be able to handle or excuse me be able to tap on any given user and navigate to
that screen so we can see more details about them.
So let's work on the next.
We've handled navigation several times in a row now.
So I bet you've got a pretty good idea of what to expect.
We want to call our actions helper from the router whenever a user taps on an individual row.
Now of course we've done something like this before.
Back when we're building lists previously.
So in my list item component I'm going to import the touchable without feedback and the view tags and
then inside of my render method I'll add on the touchable without feedback a view tag and then I'm going
to close both those off.
So there's the card section close off the view and close off the touchable without feedback looks good.
And now we need to add in on press handler to touchable without feedback.
So whenever we touch tap this thing we're going to do some work right.
We got a callback in here somewhere so I'll pass this in on press handler.
I'm not going to call it about on road press I'll blind it to this next level to find the method on
the class.
So on road press and then presumably in here we're going to want to do our actual navigation.
So we haven't imported actions yet but we will in just a second.
So I'm going to show.
Let's see it let's double check the amount that key was for that form that we're using.
So I can open up the router whenever we are on the employee list.
We are on a key of an employee list.
And then when we want to go over to that form we're going to go to employee create.
So we're going to go to actions dot employee create.
Lastly I need to imports the actions object from our favorite unnamed library out there.
Re-act native router flux.
Ah God.
The first time.
Fantastic.
OK let's do a little bit of testing and you know to see you know I'm kind of driving towards a point
here this is going to be a little bit more challenging a little bit more interesting than than what
you might think it was mean of the last big challenges we have to confront in this application.
OK.
So I just signed in here's my list of employees.
Now I'm going to tap on an employee and I go to the employee create form when we get here however the
form doesn't seem to have any details related to the employee I just tapped on.
Remember we're like we're using this form as kind of a show.
And at it.
So we don't really specifically have like a show route or a show screen words going to show an employee.
We've only got the concept of like editing our employee and that's just because that's how I designed
the app right.
Like I want to show the edit form here and then like a save changes a fire and a text button down the
bottom as well.
That was the idea here.
So I click on the employee and you know we get the form but there's no details related to that employee.
And of course there's no details.
Why would there be right.
We've got our employee form reduce our debt is 100 percent in control this form right here and we have
done nothing whatsoever to tell that reduce or hey please make use of this employee.
You know I just tapped on the employee make sure that the form reflects that employees attributes the
right kind of stuff we have done nothing around that.
All we did was tell the navigator to show this form so we can have any expectation that you know anything
is just going to magically happen here for us.
So what we really want to have happen is we want to somehow instruct the employee form that whenever
it loads up and when I say employee form I'm talking about employee create of course want to tell employees
create that whenever it loads up.
It should be showing a very particular employee.
So we kind of want to like bootstrap the form so to speak we want to pre-load the data that it shows.
Now we could use an action creator to set a you know like selected employee or something like that.
Maybe we could select a particular employee and say hey the former do search should always show either
the stuff in the form or the selected employee that does just getting like a little bit weird.
So let's go with the route of kind of like what I want to say hijack but no bootstrap.
There we go.
We're trying to bootstrap this form.
I want to kind of inject my employee into it
so inside of my actions doc employee create method right here I need to somehow communicate to the form
which employee I want to show.
Right that's like the whole idea.
I want to somehow tell it hey for me need to be showing this very particular employee right to do so.
We are going to pass some props over to the employee create form with this navigation help right here
so we can pass any object we want in here.
I'm going to pass an object with the key of employee and the value of this dot dot employee.
Now whenever this navigation method is called the Employee create form will be rendered and it will
be given an additional Propp of employee.
We are in the list item right now and each list item is called with one employee which is provided as
this Propst employee.
So that's where this value is coming from right here.
So let's test this out a little bit.
I want to flip over to the employee create for now so I can go to employee create and inside the render
method.
I'm just going to console log this doc Propst not employed like so.
So let's do a quick refresh.
I'll pull up my a log in Hoopes
And now if I just go ahead and hit add up I'm on top right.
You see undefined because we went to the form and we did not pass any like configuration directly to
the form only when we navigate to this form by tapping on an item.
Our repassing this extra prop to it.
It's not going to click on Samantha to go to the form.
And then this time around I get the very particular employee in here as well.
So now we are loading up our form and we know which employee we want to show in it and you know we know
which employee we want to kind of pre-filled these different fields with.
So let's figure out how to do that how to do that.
Pre-filing in the next section