4.9 adding trees to for

Now that we know what the state is and that we also understand how we can listen to events we can continue to work on this application and become increasingly a monitoring tool for expenses what we’re gonna do is in component we’ll create a new file we’ll call new expenses and in this case we will put a file that will be new Depense.JS

and in it as usual we will add import react below we will add a const newDepense = function parentheses arrow like this and of course don’t forget to put the export defaults new expenditure then in the new expenditure const we will add a return div and in the DIV you put form now we can add new expenses this will be the file new dépense point CSS so at least we have the style very well here I have noted. All the CSS code I let you copy as you can see there is the new expenses button and like that thanks to this. We’ll to go a little further we’ll go back to the New spending and we’ll add.

We’ll be able to go a little further we’ll go back in the New Expenditure and we will add. Here import new expenses. Css Point. perfect Now let’s go into the new spending const this that we will do we will remove the form and we’re going to add classname new-expense like these now in the level expenditure what we’re going to do we’re going to add form expenses that’s why I removed it in on will put a const this you expense form feature arrow like This is perfect now is what we’re gonna do we will export default expenses form.

you see it happens again and as usual here we made import react. and below import React we will add import expenditure form.css as this is now we will go add to the dossier news expenses as always a new file this time we’ll call expense form.css will return to the form expense and in spending const form we will add a return form. we’ll put a new expense name div controlled it’s actually they say that will contain all the entries then we’ll add you can copy the same except that there will be no S and Below that we’ll add a title label. input type Text like this very well here’s what I had to mark you for the title the amount is the date we will add right here a max we will say 2022 05 25 then below the div we’ll add a div class name we’ll mark new share expenses then in the DIV you put a button is in the button you put an Add Expenditure in the button we will add a type submit and normally it’ll be good then we’ll go back to the new expenditure.js then we’ll go back to the new expenditure.js and above import we will put then what we’re gonna do is in the div we’re gonna mark a an expenditure form like this then what we’re gonna do is we’re gonna go into the App.js and here’s what we’re going to import new expense component slash new dépense slash new dépense this one then we go here in the return down We’ll take out the H2 and put in a new expense. Then we’ll go back to the new expense.JS and here and then if we go to our page. web one can see that everything has been added it is not Still looking great, but we’ll fix it.