Original subtitles

So, as I mentioned,

I now want to add a Card component

and then work on the meal items.

Now, I will start with the Card,

and for that in the UI folder

I will add a Card JS file.

Attached you also find a Card.module.css file

with some styling for that card.

And this will be a super simple component.

It will just be a wrapper component,

which provides some HTML structure and some CSS code

for any content you want.

And therefore this is a component which could be used

in very different places throughout the application,

which is why this is such a general UI component.

It wants some props

because we will need to access props children

to get access to the wrapped content.

And of course we export it here.

We will also need some styles

so we can import classes from Card.module.css already.

And now in here I want to have a very simple markup,

we'll just return a div here

which then wraps props children so that whatever is passed

between the opening and closing tag of the Card component

is in the end used inside of Card.

And on that div we can then add a class

of classes.card using that CSS class I defined here.

And that's it already.

With that back in the AvailableMeals component here

I want to use that Card to wrap this unordered list.

So, here we can import, and we should import,

Card from going up one level, UI Card,

like that to make that component available in this file.

And with that imported we can simply wrap

our unordered list with Card.

And if we do that and save everything

this already looks much nicer.

Now, of course the meal items

don't have the final look I want to have.

And therefore I will add a new component

in the Meals folder,

but to make sure that we don't have too many components

sitting side by side here

I will actually add a subfolder, MealItem.

Now, if you add a subfolder or not

also comes down to your personal preferences.

I'm doing it here, again, to group all the components

that will be dealing with rendering

a single meal item together

because it turns out that I will actually build

two components for rendering one meal item.

And you will see which components these are

in just a second.

So, in the MealItem folder, which is in the Meals folder,

I will add a MealItem JS file.

And attached, of course, unsurprisingly,

you find a MealItem.module.css file with some styling.

And then here we can create our MealItem component

which receives some props, so our component function,

and of course export it.

And now let's work on the markup for these meal items.

For that I will return, whoops, I will return a list item.

That's the wrapper around every meal item,

which semantically makes sense because all these meal items

will be rendered in an unordered list.

So, having li elements makes a lot of sense,

but inside of that li element

I then want to have two divs side by side.

And in the first div we'll have a h3 tag

where I want to output the name of that meal.

And I expect to get that name through props

because we are rendering these meal items

for all the meals in the DUMMY_MEALS array.

So, therefore here in the MealItem component

I will now access props.name.

Of course on which prop you expect

to get that name is up to you.

You could also name this props.title, or .n,

or whatever you want.

It's your component so it's up to you which props,

which attributes you could say,

should later be set on that component.

You just need to make sure

that whatever names you're using here

to access the data are the prop names you later use

in AvailableMeals for passing down the data.

So, here I will go for props name, and I will reformat this.

And below that h3 tag I'll add a div

where I want to output their description.

And I'll therefore access a description prop here.

Again, the prop names are up to you.

And another div with the price, however, here, whoops,

however, here I actually don't want to access

props price like this but instead I will add

a little constant here before we return

which I'll name price.

And this constant will simply format

the price a little bit.

For this I'll use a template literal.

And I'll put a dollar sign,

and then use this special syntax

with dollar sign curly braces.

So, we got two dollar signs here,

one simply to output the character dollar sign

and one in combination with the curly braces

to inject dynamic content into this template literal.

And the dynamic content

I want to inject is props.price.toFixed2.

And this will simply make sure

that we always render two decimal places.

And then it's this price constant,

which I'll output here in this div

simply to output this formatted price

with two decimal places and a dollar sign in front of it.

And then here in this second div

I want to render a simple form

which allows users to enter the amount you want to use here,

the amount of meals you want to add to the Cart,

and then the Add to Cart button.

And that's this extra component

which I'm going to add.

A component which holds this form

to not have all this form markup

and logic in this component.

So, therefore here I will already add

a MealItemForm.js file,

and we'll work on that in a second as well.

Before we do that though

let's work on the styling for the meal item.

And therefore since we already added the CSS file

I will import classes from MealItem.module.css.

And now here on the list item

we can add a class name of classes.meal,

on the div here for the description

I will add a class name of classes.description,

and on the price its class name classes.price.

And that's the meal item finished now.

Now, before we work on the form

we can already use the meal item

in the AvailableMeals component.

There at the top we just need to import

MealItem from ./MealItem to dive into that MealItem folder,

and then again MealItem to access

the MealItem file in that folder.

And then here, where we map our DUMMY_MEALS,

we now can map them to a meal item instead of a list item.

So, MealItem like this as a self-closing component,

and there we now should add a key.

We should've added this before as well with the list item,

but it was just temporary.

But now we should definitely add it,

and access meal.id here because every DUMMY_MEAL has an ID.

And I will also pass in the name prop

because in MealItem I am accessing the name.

I'm also accessing description and price,

and therefore I will pass in the name with meal.name,

the description with meal.description,

and the price with meal.price.

And I'll reformat this to make this easier to read.

Now, if you preferred that you could also

pass in the overall meal

instead of these separate props.

And inside of MealItem you would then have to access

props.meal.description and so on.

I'm not doing this here,

but this is an alternative you could definitely go for.

But I will go for the separate props here.

And with that saved

we should have something like this already.

Now, let's work on the form,

which should appear here on the right,

for adding them to the Cart.