WEBVTT 00:02.420 --> 00:07.520 In this lesson we are going to create a new component the arts where component so there we can dance 00:07.520 --> 00:13.910 show all the answers that have been added to a question right here in the western speech era. 00:13.950 --> 00:18.890 I mean this runs through your code and considering that the arts were a component is not going to be 00:18.890 --> 00:25.070 used as a page meaning that we are going to include dance with a component the inside of the question 00:25.100 --> 00:30.080 or the view component the proper folder where we can create it is the components folder. 00:30.100 --> 00:33.220 So that's where lot of you. 00:33.230 --> 00:39.860 Yeah let's now define template and script name. 00:40.400 --> 00:49.610 That's where component and then yeah we can define prop so because considering that again we're going 00:49.610 --> 00:53.090 to use this component from within another component. 00:53.090 --> 00:59.750 Defining prop so we can declare that we want to receive an answer to our object as a prop so the type 01:00.800 --> 01:09.250 object and the required through now that we have asked would prop up let's define the HMO code for our 01:09.250 --> 01:10.200 component. 01:10.220 --> 01:20.030 So first of all diva and instead of this deal we can simply define a paragraph with classic text mutate 01:20.060 --> 01:28.150 which is one of bootstrap classes and yet we can use stronger answer that author. 01:28.590 --> 01:35.750 Let's also add two more spaces here and yet we can add an entire PubMed daughter the same one used by 01:35.750 --> 01:46.780 Reddit and any other house were not created at that we can actually place outside of the strong declaration. 01:46.970 --> 01:48.600 So Dan below. 01:48.640 --> 01:51.140 Let's define another paragraph. 01:51.190 --> 01:55.690 This time we can pass elsewhere not a body. 01:56.170 --> 02:01.830 Very well we are now ready to import the component so forth. 02:02.120 --> 02:10.270 That's where component from here we can actually use the at symbol which is an alias remember for the 02:10.270 --> 02:12.000 S R C folder. 02:12.070 --> 02:19.800 So s our C components then that's what component that view 02:23.050 --> 02:28.310 Yeah do we now need to declare that we want to use d component so components 02:34.510 --> 02:40.810 that's a component and not only dead of course considering that we want to render the answer a component 02:41.020 --> 02:48.090 for as many as words is the question is that says in data we need to define and. 02:48.620 --> 03:03.720 And now we need to define a new method that we can call get question was so let's define a proper endpoint 03:05.220 --> 03:15.030 which is the same as this one plus answers and then we can call API service on this end point then. 03:15.540 --> 03:28.250 But getting back data so these dot and swaps equals data and Dot results and we can call it using created. 03:28.260 --> 03:38.920 So D So what get question answers and actually need to remove these s next. 03:39.280 --> 03:42.360 Now that everything is in place yeah. 03:42.690 --> 03:53.410 We can finally use the answer a component so we can add an H.R. tag and another diva plus container. 03:53.700 --> 04:04.970 Some sort of component which is sort of closing and we want to use with the V for the negative for answer 04:05.160 --> 04:07.430 in answer words but we also want to index. 04:07.460 --> 04:15.840 So answer units in Swiss and when they said it we also want to index. 04:16.100 --> 04:16.740 Okay. 04:16.790 --> 04:22.970 Is because we can then pass it as a value for the key problem so index. 04:23.120 --> 04:34.270 And of course most importantly we need to pass the answer to a prop so square equals square for each 04:34.270 --> 04:35.100 one. 04:35.390 --> 04:38.190 In the answer is right. 04:38.420 --> 04:45.650 So let's now go back to Chrome and yet we get a smaller order because the name of the component is square 04:45.680 --> 04:49.260 and not answer the component. 04:49.280 --> 04:54.800 We now see that once Square is that have been added to the first question so let's check also this other 04:54.800 --> 04:55.360 question. 04:55.370 --> 04:56.690 Do you like jazz music. 04:57.110 --> 04:59.020 And here is the answer. 04:59.030 --> 05:05.600 One would thing that we can do is to add a separate area like an H.R. tag. 05:05.600 --> 05:09.260 So back in the answer to if you component. 05:09.350 --> 05:12.240 We can simply add any char. 05:12.260 --> 05:14.400 And even though we are not adding any style yet. 05:15.140 --> 05:20.730 Let's just define a class in advance so I feel like single that's. 05:20.810 --> 05:23.300 Let's go back to Chrome. 05:23.300 --> 05:29.050 Much better even though it would be cool to just limit these a chart to the boundaries of the container 05:29.060 --> 05:29.900 glass. 05:30.050 --> 05:36.970 So going back here question that view just going to move this one instead of the first container. 05:40.650 --> 05:42.360 And going back now. 05:42.420 --> 05:43.980 Now it's perfect. 05:44.010 --> 05:50.100 One thing that we can do to keep our code as consistent as possible is to just replace all these double 05:50.100 --> 05:53.170 dots using the at symbol. 05:53.250 --> 05:58.590 So here and also in question Ed view. 06:01.690 --> 06:12.740 And those who in home the few so here and also it will in up not to you. 06:13.750 --> 06:19.120 Now that diaspora component is finished and well integrated in the question component we are ready to 06:19.120 --> 06:21.570 implement the add as to add functionality. 06:21.610 --> 06:23.410 We're going to do so in the next lesson.