Hello, and welcome again. So today we'll do something interesting. So in the last lecture, we looked into routing, right. So let's look at it from an example standpoint. Since routing is a bigger concept, and it's much more difficult to grasp, I'll create an example here. So we have this website called as Jason generator, Jason hyphen, generator.com.

And it generates some dummy data that we can use for our project, in our case, have copied this data, and have created a new file called as data Jason. And inside this data, pasted everything. So it's basically a JavaScript array consisting of Java JavaScript objects. So each object consists of some parameters like ID, index, balance, age, name, gender, etc. Right. So let's see how we can use this.

So if I go to have our app dot view, we have this router link side, let's remove them. We'll leave the router view as it is. Let's save it and in our router.js file. Let's also remove the routes. Alright, so what we'll do is we'll create two more components. One is people don't view And another one is person don't view.

All right, so people collective and person singular. So inside this can see people and into the script, I can import the data. Jason and let's see if we were able to get that. So what we'll do is instead of outward view, we'll set up our route path as the people component. So we can remove these imports and you can see import people. Let's also import the person component and the root part is the people component.

So component. We will and for our person component is a part slash person. component All right. So instead of the people component, we have imported the data. So now, let's just have a small heading tag. I save it.

And if I go back road link will get the people list. So that's the people component being rendered. So let's see if we are able to get the data. So I can create mounted lifecycle hook, and inside mounted. So let's see the content of the data, right. So for this, we can say created.

For this we can say created. Remember, it's a lifecycle hook that we learned in previous lectures. Instead created, we had a console dot log. And I want to output data. So if I save it, and if I go to console, I'm getting an array, and the array consists of six objects. That's fine.

All right. So now we have the people data coming up. All right, so now we have the people data coming in. Let's create a div that says, person or let's say Now we have the people data coming in, what we'll do is we'll create another component that says, person to file. You'll understand in a minute why I'm creating these three components. So for now, what we'll do is instead of the person component, let's say person.

And for person, let's pick three or four fields. So what we'll do is we'll pick the name. Does the person have a name? Yes, he has a name. Let's also pick the age. Let's pick the company and email a number of friends all right.

So, inside this, so let's say this person component is expecting a prop or person is a type of object. Is it required? Yes, it is required. All right, so now we have the prop as person now what we can do is we can say it's a heading Person dot name, his age, his company and email All right. So, one more thing what we can do is we can create we can get the person's friends count. So, for this what we can do is I consider friends and for the person that computer can create a computed property that calculates the friends count for me and against the friends count.

I can return this person northwind Scotland Alright. So now we can use this computed property and count Okay, so now I have the person component ready and inside the people component i can import person wasn't I can register the component by saying components Listen. Alright, so now what we can do is we can have the person component. And we can, we can replicate the person component by using before. person, people. person in data.

Yeah. And this person can also have index. Let's also put a key towards it. index. So it won't ask us for any errors. And let's also give it a give it the value of the prop was this person.

All right. So if I say this, I should see, okay, so we get an error property or method data is not defined. So, all right, so what we can do is we can create our own data property. We can return, we can, we can create an array that says people and Tella created method we can say this dot people equal to data and should be fine. and here we can say post and in people it makes much more sense now. And if I save it, oh, we get a lot more errors.

So the error is in the dot length property. All right, so we are getting an error that says, person friends length is not a function. So in this sort of function, so we can just say length, and we should be fine. Yeah. And if I refresh, it looks good. So these are all the people we have.

So what I want to do is, whenever we click a person, I want this data to go into the person profile component, and we can have the person profile component as its own page, right. So it's called the person profile component, it will be very much similar to person. So you can just copy paste the person component but it will also have More extra trees. For example, it's at the about section. Let's add the board section in top. So I'll just make some changes, and I'll be right back.

So what I did was I added a few more fields I added about. I also added the friends list. So that's the person profile, nothing really fancy. So what we want to do is whenever the person is clicked, right, so we also have a button that says View profile. And what we'll do is for the person name, we'll help each one. Let's also align it to center so we can know which person is and also will have some margin and for the person competent in now, view Profile button, we say add click numerically listener, click View profile.

So we have a method and inside this method what we want to do is this dot router dot push an object it's also add pose and provide to a router router file you know it's easy to forget to add your conference to router. So make sure you remember that or we can do one thing. Instead of having a new route for the slash person you can just say person profile right so we can also remove the person component from here and we can save it and inside the person when we click the View profile, it's also have give it a name. person. I named this person and do we want to pass in data as it executes expecting a prop that's of type object I its name is person, so Listen, is the water What are we going to send us? Again, getting in the context and with the person, we're going to send VM dot person.

All right, if I save it, so just to explain what's going on, so, there is this little component inside which we are entering the list of people. And each person inside the people object is, is having its own component just for the rendering sake. In this component, we are displaying a short amount of data, just kind of like a instance of all the list we have, like you know, Facebook suggestions, you know, these, these could be your friends, right? So similar to that, we have a few suggestions. And upon clicking this component, we are navigating it to the person profile page, which which has a lot more data. Right.

So we have saved it and if I go back, we have the list. Also, we can do one thing Instead of be blessed. All right, so these are the people, we have just a little bit of styling, and we can click the profile and we're not getting any data. So let's see what's happening inside the console. We are getting missing prop required person, right? So what's the reason?

So instead of person component we are sending in person. Okay, so the reason could be that we did not define prompts to be true. So this is also something which people forget usually, just like I did. And if we go back and if I say this, yep, now it's fine. So here we have the person's name and about his age. I guess his name again or company, I guess.

And the email address the number of desktop friends, and the friends names as well. So this is the person profile. So that's a small example of routing. So one thing I want to touch on is that instead of the people component, if you see, instead of writing this code, the person components code like the class person is there, right? So I could have just copied this code. I could have also written it, instead of like having a separate component.

I could have also written here, and I could have added the V for for this one. But the reason why I didn't do it is, you know, this person component is there, right? So this could be used in future in in more pages. I mean, not in our project, but just in case you're building out a bigger website, right. So if you're creating a social media website, there are several pages where you want to show kind of like a person's small miniature profile. So for that, if I have a component ready, and if it expects a certain type of data, I can use it anywhere where it's required, and I could pass it the data and it would be the same, right?

So that's the reason I created a separate component for person. And I save this and everything should be as good as it. So that's one small example of doubters. So I know router is a complex subject. So that's why I also, I thought there were much more practical examples, it would be much easier to learn. So now we have the people competent person component ready.

So what if I want to send someone a link of just one person? So let's say I want to send someone the link of Simpson house. And if I say view profile, I have the link, I have the page for Simpson house. So I want to share share this to a friend. So if I copy this, and if I open it in incognito and paste it, I get nothing. And if I go to the console, it says missing required prop person.

So the reason is, we are getting the data from the people component, which is being passed on to the person component and which in turn passes it to the person profile component. So how do I send someone a link of a particular person? So that's what we'll be looking at the next lecture. All right. That's it for this one. I'll see you the next one.