In this lesson we are going to create a new component the arts where component so there we can dance
show all the answers that have been added to a question right here in the western speech era.
I mean this runs through your code and considering that the arts were a component is not going to be
used as a page meaning that we are going to include dance with a component the inside of the question
or the view component the proper folder where we can create it is the components folder.
So that's where lot of you.
Yeah let's now define template and script name.
That's where component and then yeah we can define prop so because considering that again we're going
to use this component from within another component.
Defining prop so we can declare that we want to receive an answer to our object as a prop so the type
object and the required through now that we have asked would prop up let's define the HMO code for our
component.
So first of all diva and instead of this deal we can simply define a paragraph with classic text mutate
which is one of bootstrap classes and yet we can use stronger answer that author.
Let's also add two more spaces here and yet we can add an entire PubMed daughter the same one used by
Reddit and any other house were not created at that we can actually place outside of the strong declaration.
So Dan below.
Let's define another paragraph.
This time we can pass elsewhere not a body.
Very well we are now ready to import the component so forth.
That's where component from here we can actually use the at symbol which is an alias remember for the
S R C folder.
So s our C components then that's what component that view
Yeah do we now need to declare that we want to use d component so components
that's a component and not only dead of course considering that we want to render the answer a component
for as many as words is the question is that says in data we need to define and.
And now we need to define a new method that we can call get question was so let's define a proper endpoint
which is the same as this one plus answers and then we can call API service on this end point then.
But getting back data so these dot and swaps equals data and Dot results and we can call it using created.
So D So what get question answers and actually need to remove these s next.
Now that everything is in place yeah.
We can finally use the answer a component so we can add an H.R. tag and another diva plus container.
Some sort of component which is sort of closing and we want to use with the V for the negative for answer
in answer words but we also want to index.
So answer units in Swiss and when they said it we also want to index.
Okay.
Is because we can then pass it as a value for the key problem so index.
And of course most importantly we need to pass the answer to a prop so square equals square for each
one.
In the answer is right.
So let's now go back to Chrome and yet we get a smaller order because the name of the component is square
and not answer the component.
We now see that once Square is that have been added to the first question so let's check also this other
question.
Do you like jazz music.
And here is the answer.
One would thing that we can do is to add a separate area like an H.R. tag.
So back in the answer to if you component.
We can simply add any char.
And even though we are not adding any style yet.
Let's just define a class in advance so I feel like single that's.
Let's go back to Chrome.
Much better even though it would be cool to just limit these a chart to the boundaries of the container
glass.
So going back here question that view just going to move this one instead of the first container.
And going back now.
Now it's perfect.
One thing that we can do to keep our code as consistent as possible is to just replace all these double
dots using the at symbol.
So here and also in question Ed view.
And those who in home the few so here and also it will in up not to you.
Now that diaspora component is finished and well integrated in the question component we are ready to
implement the add as to add functionality.
We're going to do so in the next lesson.