Original subtitles

Now that we know what state is and now

that we also understand how we can listen to events,

we can continue working on this application

and turn this more and more into an expense tracker.

And one important piece is missing.

For example, well, the capability to gather user input

so that users can add their own expenses.

This sounds fairly important for an expense tracker

and up to this point, that's not possible.

So that's what we'll work on next.

And for that, I will, first of all, add new components

and I'll add a new category of components.

You could say, because thus far

the expense components we have here are

about outputting expenses about showing these expenses here.

Now I want to gather user input and therefore

I'll add a new sub folder in the components folder

and I'll simply name it new expense because ultimately

that will be what the components here are about.

About gathering the input for a new expense.

And therefore in here we can add a new expense

started JS file, which will hold the new expense component

in the end and inside of this new expense component

I want to render a form where users can enter

their expense data.

So here I'll add the new expense const

where we have our component function.

And of course I export new expense here to make it available

and we can import react from react.

As I mentioned, you technically don't need to add it.

I covered this in the last course section

but I will still add it here.

Since you will see that in many react projects.

And I want to again, make it clear that JSX

under the hood uses this react library.

Now, as I mentioned, the goal

with this component is to return a form in the end.

A form for our inputs.

And I also want to provide some styling around that form.

So I'll first of all, return a div.

And then inside of that, div return a form.

Now we're speaking of styling,

we can also add a NewExpense.css file

and you find that file attached.

You can either just paste into style to find there

or simply replace your NewExpense.css file with mine.

And then of course, make sure you import NewExpense.css.

And that's all something you learned

about in the last course section.

That's all not directly related

to state or user input, of course, but we'll get there.

So now that we got this imported,

let's add the new expense CSS class to this div

and let's now work on the form.

And actually I'll take that form

and put it into a separate component

just so that the form logic lives in its own component.

And this component is really lean again,

not something you have to do,

but something I will do here.

And I did talk about splitting components

in the last core section as well.

So we can add expense form JS file and in there

create an expense form component function like this.

And then of course also export that function expense form

like this.

And if you want import react from react, even

though it's not technically required, and I'll also set

up some styles, so I'll add a expense form CSS file

and you'll also find that file attached and you

can replace yours with it.

And then just as we saw it, multiple times,

import that CSS file,

the expense form CSS file.

And now here in the expense form component

I will return this form element and in there will then

structure this form.

Now, when it comes to structuring the form

for gathering expense data, I want to let users

enter a title.

I want to let them enter a date or pick a date

with a date picker.

And of course users should be able to enter the amount so

we'll need three input fields and for styling reasons

I'll put every input field in a div where the div has

a class of new dash expense underscore underscore controls.

Or to be precise,

that's actually a div which will hold all inputs

but then I'll create another div in there with a clause

of new dash expense underscore underscore control

for a single input.

And in there, we can now set up a label, for example

title for the first input, and then add an input

of type text like this as a self-closing tag here in react

because these input elements don't have any content

between the opening and closing tags.

So we can and should write it

as a self-closing tag and react.

Now that's how we can create a first input here.

And of course, these are all just default HTML elements

nothing reacts specific here, but we're soon

going to add listeners to wait for user input.

And we're soon going to manage some state with that.

So this is some crucial groundwork

which we have to do first.

Now we can copy this div with the label and title

and duplicate it to also have a input for the amount

the type here could be number.

And we could set a minimum, a minimum value

of zero dot zero one

and set up a step of zero dot zero one as well.

And these are just default HTML attributes

for input elements

which control how this element can be used.

And last but not least I'll replicate the div

One more time to also provide an input for the date

set the type here to date

and this will then automatically give us a date picker.

And I will also set up a min date

and set this to January 1st, 2019 and add a max date

which I'll set to 2022 and there December 31st.

And I'm picking this min and max date

because later we also want to add a filter where

we only provide the years 2019 to 2022 for filtering.

So I want to make sure

that these are also the only years expenses can be set to.

Of course you can play around with these values.

These are just some example values I'm working with here.

Now we got all these inputs.

We now also need a button to submit the form

and therefore right before the form closes

I'll add a new div

next to the other div, which holds the controls.

And in there, I'll add a new expense actions class

like this new dash expense underscore underscore actions.

And then in there add a button where we say add expense

like this,

and I'll set the type

of this button to submit so that when this button is pressed

since it's inside of this form, this form will be submitted.

Now, there was a lot of work on the expense form.

Now we can use the expense form in the new expense component

and therefore we of course want to

import our expense form functional component.

So this component function, we import this

from new expense dot JS without the file extension

like this.

And then here, we can just render this

and add it as an HTML element

in our new expense function body

so that the new expense component will render the

expense form component.

That should be expense form of course, my bad.

So expense form is being rendered here.

And now when I rendered this entire new expense component

in the App JS file, because in there in the end

we're combining all these components.

So here I'll import new expense from dot slash

components slash new expense slash new expense.

That's the path to this new expense JavaScript file.

And then here, finally, instead of this dummy age to tech

we can render new expense like this.

If we now saved this,

this doesn't load

because I have an error in the new expense

JavaScript file. I'm importing expense form

from new expense that's of course not correct.

I should be importing from expense form.

That's where this component lives.

Otherwise I create an infinite loop

and that's this page that's causing this page, not to load.

Now, this works after changing this

and restarting the server

and revisiting local host 3000.

And now we have this form here at the top, which is great.

Now we added the component

but the component is not doing anything.

My next goal is now to make sure that we gather the inputs.

The user chooses here may be on every keystroke

or basically whenever the value in one

of these inputs changes so that we can, for example

locked us to the console for a start.

And that then as a next step

when the form is submitted, we step in

in our code and we take these Gavart input values

and combine them into a new expense object.