All language subtitles for 017 Outputting Data on the _Details_ Page_en

So let's now connect this,

quote item links here.

Where there isn't a quote item component

I get this anchor tag.

And this at the moment is basically just a placeholder

so that we see this button link here.

But it's not how we actually wanna create that link.

We could stick to anchor tag with the ref attribute.

But then you learned we have the problem

that we actually will send a request and reload the page.

And that's not something we wanna do.

Instead, we wanna stay in the loaded Single Page Application

and let React Router do the URL changing and page updating.

And therefore in this quote item component,

instead of using an anchor tag,

we wanna import the link component from react router dom

and then replace this anchor tag with this link component.

Now this link component needs to prompt

and here we now need to set the path we wanna go to.

Now when it comes to that path,

we have to keep in mind

that for the clothes detail page here,

we actually have this dynamic segment in the URL.

And we need that segment

so that we can extract the data in that quote detail page

and load the appropriate close data for the selected quote.

Now therefore, the path to which you wanna link

should be slash quotes, flash

and then some concrete value for this place holder.

So here, we actually wanna create a dynamic value,

because we wanna derive this path dynamically.

And I'll do this with a template literal here.

And it will always start with slash quotes.

But then we have a segment there after,

which is different for every code item.

So inject this here into this template literal.

And there, we could expect that we get this ID prop

which identifies this specific quote item.

And indeed we will get an ID prop because in code list,

I'm setting an ID prop here.

So we can extract props ID here

to construct the path to this concrete quote,

which we're outputting in this list.

With that if we save this,

if we now click View full screen,

we view the quote detail page for q1.

So for the first quote

and here for the second quote it's q2.

So that works.

And with that we can also continue working

on that quote detail page a little bit.

Because there I don't just wanna output this dummy content.

Instead, I wanna output the actual quote data.

And later we'll fetch this from a database.

For the moment I'll just use some dummy data.

And I'll copy this dummy quotes array from all quotes,

and also add it here in quote detail.

And of course we could do for all the define

at once in some global file and export it,

but it's just some dummy data

which we'll remove later anyways

so copying it here is fine.

And now that it is copied,

we can use this dummy quotes array

to get the appropriate quote which you want to output here.

We can get that quote,

which we store maybe in a constant name quote

simply by reaching out to dummy quotes

and then finding an item where the quote

we're having a look at in this array

has an ID which is equal to parents dot ID dot quote ID.

So equal to the ID we have in the URL.

And dot quote ID well because we have quote ID

as a placeholder name here in the route definition.

With this we identify one of our quotes

and we can be offered an output this quote data.

Now for that I prepared another component,

the highlighted quote component

which simply well outputs and styles as single quote

and therefore we can use this component here

all import the highlighted word component from components,

quotes, highlighted quote

and replace this h1 tag in this paragraph

with highlighted quote

and now this highlighted quote component,

once a text prop and an author prop

and hence all set these two props,

all set text equal to quote dot text

and author equal to quotes dot author.

Now of course, we could be visiting this quote detail page

with an ID which is not part of this quote array.

So we also might wanna handle this

we might wanna check if quote is undefined,

so if not quote, if we didn't find a quote

for the ID we had in the URL,

because of course a user can enter anything in that URL,

I can click on these links

and I only have quotes that actually exist.

But I can manually enter q free here

and then I'll not have a quote

and therefore we might want to handle that case.

And if we don't have a quote, we wanna return

and display some fallback content,

maybe a paragraph where we say no quote found,

anything like that.

And with that if I enter q free here, we get no quote found.

Of course we could change the styling of that text.

But if I do enter a valid ID, I see that quote instead.

And it style like this because

of highlighted quote component.

So whichever also putting some dummy data

on this quote detail page.

Now lets get back to rounding its self

and dive into more rounding features

which we also might need in application which we're building