Original subtitles

Now that we got

our first basic pages in place

before we add more route features,

let's add some data, some dummy data

which we can output for now

and I'll start

in the all quotes page.

In there I wanna output a list of quotes

and a little bit later

in this section,

we're going to fetch those quotes

from a server

for the moment let's work with

some dummy quotes here,

some dummy data

which I just defined here

in a constant.

It should be an array of quotes

and every quote should be an object

with an ID.

Any ID you want like Q1.

Then we also want to have

an author field

and here I'll just use my name

and a text field with,

well the actual text of the quote,

for example, learning React is fun

and then I'll copy that

and create the number code

with a different ID

and a different author,

because that's me with my full name

and the quote is,

learning React is great.

Now that's just some dummy data here.

Now the goal is to output that data

and that starting project,

which I've provided to you

does have a quote list component.

This quote list component

in the end just renders

an unordered list here

and that unordered list

renders a bunch of quote items

and a quote item looks like this.

Now they offer in all quotes.

I wanna output that quote list

and hence we should first of all

import this quote list component

from going up one level,

diving into components,

quotes, quote list

and then here in all quotes,

instead of returning this H one tag,

I'll return quote list

and now this quote list component

in the end wants a quotes prop,

because I'm accessing that quotes prop

inside of quote list

and hence here I'll set

quotes equal to my dummy quotes here.

If I do that and save this,

then on the all quotes page

we should see these two quotes

and we have these quote items

with these buttons,

which at the moment don't do anything.

If we click them, nothing happens

but that is a first step.

Now, if I do click

such a item link here,

if I do click view full screen,

I of course wanna load

the quote detail page for that quote

and we'll implement that

in the next step

before we do that

let's go to add a quote

and also work on this page.

This page should display a form,

a form which allows us

to add a new quote later

and for this I did prepare

this quote form component

in the components folder.

It is a component

which renders a form

and which also then has this

submit form handler function

which doesn't do anything

except for trigger a function

which it expects to get

on the on add quote prop

to which it then passes

this entered data.

So in the component

where we use quote form

we wanna pass a function

to the quote form component

on that on ad quote prop,

which expects this data

hence here in the new quote page

we wanna use that quote form component.

So we can import quote form

from components, quotes, quote form

and then output this year instead,

the quote form

and now here, we need to pass this

on add quote prop

which I just talked about

which we expect

instead of the quote form component

and as a value,

we wanna pass a function,

a function which

expects this quote data.

So here in the

new quote page component

I'll add a new function,

the add quote handler function

for example, where I expect

to get some quotes data

and where we then later

we'll sent this to a server

for the moment

I'll just console lock

the quote data here

and then it's this function,

a pointer at this function

which we passed to quote form.

With that if we save this

we have this form here

on this new quote page.

So as that this page

and this demo project

is slowly taking shape.

Now let's make sure

that clicking on the view full screen.

So on such a quote item

on this link here,

that clicking on this link

actually loads this quote detail page

and definitely try

implementing this on your own.

Try implementing a link here

which loads the detail page

for the different quotes.

So which respects

the different quote IDs in the URL.

We're going to implement this together

and finish this quote detail page

at least the first draft

in the next lecture.