Original subtitles

So let's work on that MealItem for now

which allows us to add items to the cart.

For this we already added the MealItemForm.js file here

in the MealItem folder, but of course it's empty right now.

We will also need some styling.

So again attach to find a MealItem.module.css file

so that we don't have to write the styles manually here.

Now in the MealItemForm.js file,

we of course wanna create

our MealItemForm component function,

and that this will receive some props here.

And we of course export this function here.

Now we can also already import the style classes

with import classes from MealItemForm.module.css

and then start with the JSX markup for this component.

Now here, I wanna render a form element

and in there we wanna have an input,

like this and we wanna have a button.

So therefore here, we can add both.

Now for this input, I will actually wrap that

into a separate component, so that we have a reusable input

which we could use in other parts of an application as well.

I'll do this as a second step though.

As a first step, let's finish the button.

For that I'll simply say Add on it

because that button will add it to the cart.

Maybe add a plus in front of Add as well.

And of course, add a class on the overall form

with class name and set this equal to classes.form,

like this.

Now we can go to the MealItem.js file

and import

that MealItemForm

component.

MealItemForm

from MealItemForm like this,

and output it here,

between the div.

Now, if we save this, we have something like this

which is not the final look but which is a start.

Now for the final look, as I said,

I wanna extract that input

into a reusable pre-styled input component

which could be used in multiple parts of the application.

Again, just as with the card

and a lot of these examples here,

not because this here would be a super huge application

but because these are realistic scenarios

in bigger applications you might be working on,

that you wanna have these

reusable pre-styled utility components like inputs,

or maybe all the buttons and so on,

which you use in a lot of different places

of your application.

And therefore in the UI folder

I will add a Input.js file

which will be responsible for rendering that input.

And therefore attached to all

to find the Input.module.css file

with styling for that input.

Now in there, I will, of course again

create my

component function as we did it multiple times already.

And of course we'll import these classes.

Import classes from Input.module.css.

And then here, we can return the markup for this input.

And in this case I wanna have a div here

with a class name of classes.input for the styling

and then there a label

with some text for the input and then the input itself.

Now you could definitely write this

in a lot of different ways.

Maybe even letting the user of this component decide

whether you want the input or a select or a text area here.

But to keep things simple here,

we'll just always render a input.

Now, of course the label text should be configurable

and therefore the text output here is props.label,

though of course, it's totally up to you

which prop name you're expecting this name on.

I will also set the htmlFor prop here

to set the for attribute, like class.

You don't set class or for

but in the case of class it's class name in JSX,

in the case of for, it's htmlFor

because both class and for are reserved keywords

in JavaScript.

And here, I will then point at props

and then input.id.

Again, this is my component

so I can decide which kind of prompts I expect

and which structure these props should have.

And I simply expect here that for this input component,

when it's getting used,

I get a label prop with the label text and input prop,

which then itself holds an object with configuration data

for the input, like for example, the id,

which we therefore then also add as the id prop here

on the input.

So props.input.id.

In addition, I will now use a nice little trick

to pass all other configuration data

I might've gotten for this input

to this input element here as props.

I add curly braces here, just like this,

and then use the spread operator to spread props.input.

This ensures that all the key value pairs

in this input object,

which we receive on props input are added as props to input.

So if input object here is an object

that for example has

type

text.

So if that is what we get on props input, for example,

then this code here would make sure

that type equals text is being added.

This is how that works

when you use the spread operator on an element like this.

It's simply a convenient way

of making this input highly configurable

from outside this component, through this input prop here.

And of course, therefore we can even get rid of this id

if we want to, and simply expect that this id

is part of this input prop as well,

which we already do expect here.

And then therefore also added automatically

through this syntax as a prop to this input element.

Now, and with that added, we can of course go back to the

MealItemForm component

and there import

Input from going up,

going up,

UI/input

and then replacing this input here

with input as a self-closing tag.

And there I will now add the label prop

because I'm expecting a label prop here

with some text inside of it,

with a label off amount.

And then the input prop,

which now itself should hold an object.

So here, the value is an object like this

hence the double curly braces, it's no special syntax.

Instead we have one pair of curly braces

to evaluate a JavaScript expression

which is passed in as a value.

And then that expression just happens

to be a JavaScript object.

Hence, we have that other pair of curly braces.

And in that object, I wanna have an id,

which is amount let's say,

type which is number

and this is one of the built-in input element types.

And I'll add some validation props as well

which are all props you can add

by default to the input element.

And that would be the min prop with one

and the max prop with five

to make sure that the amount that can be added

has to be at least one but is not bigger than five.

I'll add the step prop

which is also supported on the input element

and set this to one

and also provide a default value of one

so that this is the initial value

with which this input is populated.

And again, these are all default props

which you can add to any input element.

So these are not props

which we need to interpret and handle,

instead we just distribute them onto the input

through this syntax

and then they automatically start making sense

because these are all built-in props for input elements.

And if we now save that, this is what we got.

And that looks, of course, very, very nice.

Now with that, we built a lot of components

and we still got the cards components to build

but they're after.

We are finally ready to also start working on

the logic of this application and to add context,

to manage the card for example,

but of course building all these components

that is the meat of basically any React application

you are going to build.

And therefore I'm walking

through that process again with you

because you need to know how you can build components,

how you can use components.

That is super crucial and therefore an important practice.

And with that, let's build that card modal

and there after, let's finally wire everything up

and add more logic to this application.