4.12 communication component child parent ascending.

What we’re gonna do, we’re gonna add a new prop to the expense form right here this sound our component we can name them however we like but I will name it at the recording we will mark here onSaveDepense dépense data I’m just naming him on something because I want to clarify that the value of this accessory must be a function function which will eventually trigger when something happens inside this component now just below const NewDedépenses we’ll add space to mark const save data expenditure and on varajouter Handler

Actually I’ll add a data manager expenditure and it is important as a parameters here add an arrow function and inside here we’ll add entered expenses data parameter name depends on you this is your function but now I specify that this function expects to get this parameter and then if we’re going to add expenses data expenditure we add this semicolon and then in the crochet we will add three small points entered expenditure just to explain to what serve the three little dots the three small points in javascript sound the spread rest operator spread operator allow to extend an expression in places where multiple arguments that are expected I remove all key peer values and adds them to its new object then adds a new key to the ID key

so we’ll add ID (ID) that means math.random identifier Put parentheses then what is math, math means mathematics random chain to convert it to string if you want point tostring and parentheses it is not a perfect and theoretically unique we could generate the same value twice but it’s pretty good and then we can see what we’re doing with it thereafter and for the moment I’ll just lock it is give expenses enriched with his data and we’ll just add in stockings. One small thing is in spending form right here we added our onSaveDepenseData we’ll put a little equal between crochet and inside it’s crochet you put the save only you remove the on from save Data.

Handler there on the other hand remove you on like this and you put a tiny little S and you put a S lowercase so this save spending decision and remained an accessory in my component customize and receive this function as value now let’s go into form expenses we’re going to go to console expenses data and what we’re gonna do we’re gonna take it out you will see why because instead of accessories instead of submitting Handler and instead of recording my expense data I’ll go to the accessories to record expenditure data and run it here so here see add props point you add onSaveDepenseData and of course you put in brackets Semicolon then you add data expenses in brackets therefore in App.js we can add a function we’re gonna write const right here we’ll put add Handler expenses we plan to get our expenses here as Settings then we will make some something for the moment you add equal expenses arrow function And you put the hooks with a semicolon like this I’ll just cancel the newspaper in the JS application and the console expenses inside we go marked console.log in brackets In App.js we have not yet fully learned how we can make data lists dynamically we will add console.log again in parentheses expenditure semicolon us could therefore name this prop

here on advertising spending again the name depends on you this is your component but again I will follow this convention starting with specify that it is a function pointer of the shot here you put on as before Add expenses between crochet Add Handler expenses like this. We’re gonna add this and this so there’s no blame we’ll go back to New Expenses and here we’ll go add props like that instead of new spending we can now call them

we can accept the arguments here Now here’s what we had earlier console expenditure Data we will remove it and we will add props.onAddDepense actually this is what we put in the App.Js we’re going to call it right here and of course here we want to use the name that we have chosen here in the components of the application we call the pass function as a value for that on own expenditure then right here

inside the parentheses we will put data expenditure I call it here and it will transmit actually here give my expenses and if you go to your website and you try to add a product will see that in your console the new expenditure will register but for the moment I wanted focus on this problem of state management and events and be able to transmit data in an element crucial here How it works we find ourselves for the next class.