React Hooks and Context API - Build a Budget App with Browser Local Storage

hi and welcome to our new YouTube tutorial in this video we're going to be building a react application called budget up the project is going to be based on react hooks and context API nowadays those two tools are really popular so I hope this project is going to be interesting and helpful we already have a couple of react projects on our channel so if you're interested you can go ahead and check them out I will leave the links in the description alright let's go ahead and first of all describe the project the application consists of a couple of different parts on the left side we have a header budget up followed by the total balance and down below we have income and expenses separately on the right side we have a couple of different inputs with the submit buttons and down below we have transaction history okay let's go ahead and see how this application actually works those two groups of inputs are for income and expenses I can enter here the transaction text let's say car sold and then down below the amount let's say 15,000 if I click the submit button or press the Enter key then down below we'll get a word transaction with the text and the amount and also on the left side the amount of income and also the total balance will be updated let's go ahead and add an expense let's say rent and the amount $500 now we got our expense transaction also the number of total expenses and the balance are updated if I want to delete the transaction I can click this delete icon so the transactions are removed and also everything is updated properly on the website okay so that's the way how our application works now we can go ahead and get started I had created a new folder on the desktop called react app let's go ahead and open it in vs code now I'm going to create react application let's go ahead and open the terminal you can open it from here you need to click new terminal or you can just simply press control with tilde key alright before I run the command I want to remind you that first of all you need to install nodejs because we're going to create a react app using the node package manager so if you don't have no J's on your machine then first of all let's go ahead and install it once you install node then you can run and px create react app and then we have to specify the name of the project I'm going to call it budget up actually this process may take a couple of minutes so I'll be back once it is done alright so the application is created now I'm going to run it to the browser for that first we need to CD into the folder and then we have to run NPM start all right so the project is up and running lastly let's organize our working environment a little bit I'm going to place the editor and the browser like so and get started so in the source folder we have a couple of automatically generated files I'm going to delete all of them because I want to start from scratch let's go ahead and create index dot JSP then bring in a couple of modules here I mean react and react Dom actually before I type here something I want to show you one of the villa's code package is called es7 react Redux snippets this package allows us to write the code with shortcuts so i recommend you to install and use this package in order to import the react we need to type just I M R so we have import react from react as for the reactant we have to type i m RT besides that i want to import app components which right now doesn't exist but we will create it in a minute so let's import up from up and finally in order to render the application to the browser we need react Dom dot render this method takes two arguments the first one is going to be the app component and we have to insert it like the HTML tag and then we have to select the root deep elements using get element by ID method that's insert here ID root the root is the main div elements which is placed in the index dot HTML file in the public folder so with the help of this element the entire app is rendered on the page all right right now we have an error the browser because we have to create app component so let's go ahead and do that so this component is going to be the main component in which we will include all the other components in general the component could be either class-based or functional and in this case I'm going to make it a functional component in order to do that we have to type here ra f c/e so as you see the functional component is generated let's insert here h1 heading elements with the text up so as you see now the application is rendered and it means that everything works fine okay so throughout this project I'm not going to write any CSS code because we are focused only on react therefore I will use the ready styles I'm going to create app dot CSS file then in the github repository I'm going to open the CSS file let's grab the entire code from here and paste it in the app dot CSS file so we can either download the entire source files from here the link will be in the description or you can just copy all the styles and code the application with me if you download the source files then you won't have the node modules folder and the first thing that you need to do is to generate them using NPM install command ok that's it about CSS we need to import CSS file in the app component all right besides that throughout this project I'm going to use for awesome icons so let's go ahead and grab the CDN link we have to search for font awesome CDN is then we need to select you CSS and grab the first link let's open the index dot HTML file which is placed in the public folder and then paste link in the head element alright in order to apply some styles to our app components I'm going to assign to the development class name container then inside of the container I'm going to create another div with a class of wrapper and then insert the h1 heading element inside that div element so now as you see we have here some Styles I mean the background of the container is different and also the background of our application is changed alright so now I'm going to create different components to build the user interface of the application and after that we will take care of its functionality let's go ahead and create a new folder in the source folder let's call it components and then inside the folder I'm going to create a new file let's call it header dot j s so this component will include the heading budge it up let's go ahead and make it a functional component for that as you know we need to type our a f c/e then assign to the development class name header and insert here h1 heading element with the text budget up next we have to import this component in the app to J's file so we need here import header from components folder and we need to select header and then finally let's insert it here instead of the h1 heading element so here we have the header budget up okay let's move on and create the next component which is going to be the balance it will include the total balance and also the amount of income and expenses so let's go ahead and create a new file I'm going to call it balance dot J s let's make it a functional component let's type our a f c/e then assigned to the development class named balance so I'm going to pass here two different heading elements the first one is going to be the h2 heading with the text your balance next I'm going to insert here h3 heading elements right now the amount of total balance is going to be hard-coded so that's into Q let's say zero point zero zero okay next we need income and expenses let's open div tag with the class income expense then open another deal with the class plus so we will have here heading and the paragraph let's open h3 heading elements with the text income next we need paragraph and let's insert here plus dollar sign and 0 let's go ahead and duplicate the elements once changed the class name we need here - instead of the plus also change the text we need expenses and instead of a plus sign let's put here - all right that's it about this component let's go ahead and render it on the page we have to import it in upload J's file we need balance here and then insert it down below after the header component all right so as you can see balance is displayed it looks good and we have to move on to the next component which will include those input elements with submit buttons so let's create a new file in components folder I'm going to call it add transaction Jas then make it a functional components let's assign to the development class name for wrapper and then open form elements so it's going to be the form for the income we will have two different inputs and the submit button which will be the input as well so let's open the developments and assigned to it following classes we need input group as the common class name and also income as the individual class as open input element with the type text also I'm going to add here placeholder attribute with value add income and also I'm going to use autocomplete let's set it to off it will allow us to hide previously entered values in the input field okay let's duplicate this line of code so the second input element is going to be for the amount therefore I'm going to make its type number when the input has a type number you can enter all living numbers then change the value of the placeholder attribute insert your amount and finally we need submit button so it's open again the input elements in this case we need type submit and the value submit as well all right that's it about the first form element let's go ahead and duplicate it and make some changes we need expands instead of income and also change the value of placeholder attribute let's make it add expense all right that's it about this component as usual let's go to the up to jf file import the add transaction component and also insert it here down below so as you can see we have here our form elements let's go ahead and move on to the next components I'm going to create the list of income transactions as well as the expense transactions so let's create a new component call it income list no js' let's make it a functional component I'm going to assign to the development class name transactions it's going to be the common class name and besides that I'm going to use transactions income but then insert here h2 heading element with the text transaction history after that I'm going to open you will tag with the class transaction list and then inside of the you element I'm going to open li with the class transaction so the Li element will consist of three different parts we will have to span elements for the text and the amount and also we will have a button for deleting the transaction in button I mean the phone also Michael so let's go ahead and open span elements with the class transaction text as the text that's insecure let's say salary then duplicate this line of code I'm going to change the text into the amount let's interview 5,000 and after that we need to create a button with the class name delete BTN then insert in it I element with the classes FAS FA - trash alright so that's it about these components before we move on to the expands list let's render and on the page for that we have to go to up the J's file and import income list component and also let's insert it here down below okay so here we have our transaction let's go ahead and do the same for expense quickly I'm going to create a new file let's call it expands please Jas then I'm going to copy the entire component from income list and then we need to make some changes I'm going to change the name of the component we need here expense list then change the class name instead of income we need expense and also I'm going to change the text and the amount let's put here rent and $500 after that in order to render this component we need to import it in app dot JS file and then insert it here down below so as you can see here we have the expense transaction alright so once we are done with the list of income and expenses now it's time to take care of this day of our application as we said at the beginning of this tutorial we're going to use context API so I'm going to create a new folder let's call it context then create a new file I'm going to call it global state nodejs so first of all let's go ahead and import react then we need to import create context function actually this function will allow us to create a context and besides that we have to import one of the react ups called use reducer this method will help us to connect the reducer to the state okay before I create a context at first let's go ahead and create an initial state so it's going to be the objects which will include two different arrays the first one is going to be the income transactions as for the second one is going to be expand transactions so I'm going to pass you some hard coded data but eventually we will grab the data from the input fields actually I have some already data here so I'm going to insert it in the state you can create it on your own or just pause the video and insert it manual alright let's go ahead and create the context we need export global context then we have to use create context method and we have to pass here the initial state object okay after that we need to create a functional component let's call it global context provider so in this case we're not going to use the use state hook instead of that we will use use reducer if you are familiar with Redux then you should know this kind of technique because it is quite similar to redux who will use dispatch function actions and so on let's go ahead and use array destructuring and grab the state and dispatch function then we need to use use reducer hook and at first let's put here up reducer right now this file doesn't exist but we will create it in a minute as the second argument we have to pass here initial state actually it will be the value of this state that we destructure here so now we have to return the context provider we need to provide this state then we will wrap the entire application with that global context provider and this state will be accessible from all other components so let's go ahead in the return global context dot provider make sure that you have closing tag as well so as I said we will wrap the application with the provider in order to get access to the state from the components we have to pass here children as the prop and then we have to pass it down below as well so again the children will be all the components that exist in our application besides that the count is provider should have the value property it will include the objects in which we can pass some data I mean the data like the state and also the methods that will dispatch the actions right now I'm going to pass here the data from our initial state I mean the income transactions we need to assign to it state dot income transactions and then we need expense transactions again from State when it states dot expands transactions a right so that's it about our context right now next we have to go to the app Doge's file and wrap the entire application with the context provider first of all let's go ahead and import it we need here global context provider in curly braces we have to grab it from context folder and the global state file then let's go ahead and wrap here everything with global context provided alright so the application is wrapped with the global context provider as you see we have an error saying that the UH producer is not defined let's go ahead and create it in the context folder so the a producer will include the switch statement in which we will define different cases like add income or expense or deleted transaction and so on but we will do that a bit later right now we're going to use just a default case to proceed with our work so we need to export the function this function will take two parameters the first one is going to be the state so this state comes from the use reducer hook as you know we passed here two arguments the first one is an a producer and the second one is the initial state as for the second parameter is going to be the action in general actions are pure JavaScript objects they have one required property called type and also they might have payload property as well we will refer to the actions a bit later now let's create a switch statement then inside the parentheses passed action type and then use the default case I'm going to return here just the state next we need to import a producer in global state DOJ's file all right so if we inspect the page and then check out react dev tools actually it is a google extension so if you don't have it yet then I recommend installing this extension because it is a really helpful tool when you try to build the application with react so if I click here components then you will see a couple of different sections in the first one you can find our components and also the global count is provider if I click it then down below you can find hooks which has a reducer property it includes our state's I mean the income and expense transactions and now we can get access to the data from our components easily actually I see here some error in the console let's go ahead and check it out so we have here the warning message saying that we have invalid dump property or a complete actually it should be written in camel case and knowing lower case so let's go ahead and fix that let's go to add transaction components and change these attribute all right so the warning message is gone and now it's time to get access to our state and display the data dynamically I mean to display the transactions in the lists so let's go to income list no js' file and first of all we need to import the global context from context folder and the global state file besides that in order to use context we have to import another react hook called use context okay so we need to get access to the income transactions in our state because we have to display all the income transactions in the income list so let's go ahead and use the structuring we have to distract your income transactions from the global context so let's use here use context hook and then we have to pass here global context let's go ahead and run income transactions to the console and see what do we have so as you can see we have here an array which includes all our income transactions alright so in order to display all three income transactions we need to look through this array and display each of the objects as the list items right now we have here a hard-coded Ally item so let's go ahead and map through the income transactions we have to pass your callback function with the parameter which is going to be the current item from the income transactions I'm going to call it income transaction and now we have to return the ally element inside of this function so instead of that hard-coded text and amount we have to pass your income transaction with the income text property and in the same way we need here income transaction with the income amount property so as you can see we have here all three income transactions alright actually before we move on to the expanse transactions and display them in the list I want to transform this code a little bit I mean I'm going to create a new component then we will put the Li element in the component and also we will return it here so let's go ahead and create a new component I'm going to call it income transaction let's make it a functional component then I'm going to go back to the income list component let's grab the entire li elements and paste it here so right now in this component the income transaction is not defined and somehow we have to bring it in here so in this case I'm going to use props we need to pass here income transaction and they call braces because we need to destructor it as well then go back to the income list component and import the income transaction then down below return the income transaction component we need to pass here prop income transaction with a value income transaction as well okay so as you can see we got here the exact same result right now we have a warning message in the console saying that each child in a list should have a unique key prop so it means that each list item should have the key property with some unique value in most cases we use ID in this case each of the transactions has ID property right now they are hard-coded but anyway let's use them at the end of the day we will take care of that so let's pass your income transaction dot ID all right so the warning message is gone let's go ahead and take care of the expense transactions let's create a new component expense transaction dot Jes then go to the income transaction component and copy the entire component paste it here and change income into X pass everywhere after that let's go to the expense list component and import use context hook then we need to import a global context as well let's go to the income list and grab the code from here and finally let's import the expense transaction component alright so after that we need to destructure the expense transactions from a global context so let's grab this line of code from here and then change income in to expense lastly we need to map through the expense transactions and display them in the list so let's go ahead and grab this code paste it here instead of the li element and change in come in to expenses all right so we see here the expanse transactions as well in the list so right now everything is ready to take care of the functionality of our application we should program three different things I mean adding transactions expenses and deleting transactions okay let's go ahead and open the add transaction component where we have the form elements so the first thing that I'm going to do is to create a new state which is going to be the local state for this component let's go ahead and import use state hook then down below create a state I'm going to use array destructuring we need here to pass income and then set income so I'm going to set income to an object which will have two different properties the first one is going to be income text let's set it to empty string as well the second one is going to be income amount and I'm going to set it to 0 all right next we need to grab the values from the input fields I mean we have to grab the income text from the first input and the income amount from the second one for that we have to use the on change event so let's go ahead and assign to the input elements on change attribute and pass near a function name on change income right now this function doesn't exist a decimal problem I'm going to create it now let's insert here we've an object so now we have to use the set income method in order to get the values from the input fields I'm going to use the following technique as you know an event object has the property called target it gives us the element on which the event is fired in this case it's going to be the input element so to access to the needed inputs we can using name property first of all let's assigned to the impediment the name attribute so the value of the name attribute should match the name of the property of the income object in this case it's going to be income text as for the second input element it's going to be income amount so now we can pass here e dot target dot name as the property of the object as you see I used here bracket notation because we can access to the exact property name with the help of it as the value we need e dot target dot value okay let's go ahead and run to the console income and see what this code gives us so if I type something in the first input then we will get the object in the console with a property income text and with the proper value that I type here but if I enter some number in the second input field then again we will get an object but with only the income amount property so the income tax property is overwritten by the income amount so actually we don't need this we have to keep both properties in the object and in order to do that we have to spread out the income object now if I type in both inputs then the object will include the values from both input fields all right so the unchanged event is set up next we need to take care of the submit event each of the forms should be submitted once we click the submit button or press the Enter key I mean that a new transaction should be added to the list on submitting the form so let's go ahead and assign to the form element on submit attribute and pass you the function name on submit income then create a function with this name I mean on submit income and pass here event object so first of all we need to prevent the default action of the submit button I mean once we click the submit button then the page will reload by default in order to avoid that default behavior we need to use a dot prevent default method so the next thing that I'm going to do is to create the brand-new objects which will include the text and the amount values that we enter in the input fields then we will dispatch that object into the global State so let's go ahead and create here and objects I'm going to call it new income transaction as you know each transaction should have the unique ID right now we have some hard-coded IDs and in order to generate a unique ID we can use a couple of different ways in this case I'm going to use one of the NPM packages called UUID which allows us to generate a unique ID for each newly created object so let's go ahead and install UUID then import it we have to specify here version 4 as UUID v4 from UUID finally in severe ID property and assigned to it here UID v4 alright next we need to define an income text the value is going to be the income text from the income object so we need here income dot income text I think it would be better if we destructure properties from income object so let's grab income text and income amount from income in this case we just need to pass here income text but according to the es6 syntax if the property and the value are the same then we can write it I'm going to do the same for the income amount as well all right let's go ahead and run to the console new income transaction so if I fill the input fields and then click the submit button then we will get an object with three different properties we have here ID income text and income amount as you can see the amount is represented as the string value and actually it's going to be the problem so we need to transform it into the number and you can do that in a couple of different ways in this case I'm going to use multiplication if we multiply income amount by one then the string value will be transformed into the number because of the type coercion so if I feel again the input fields and click the submit button we will get a number as the value of income amount property all right so that's it about add transaction component right now next we need to work in the global state so the next thing that we have to do is to create a function that will dispatch the action to the reducer so that the newly created object will be added to the state so let's go ahead and create a new function I'm going to call it add income this function will take one parameter which then will be passed as the value of the payload property it's going to be income transaction so now we need to use a dispatch function as you remember we grabbed this function from the context inside the parentheses we have to pass an action as we said actions are pure JavaScript objects they must have type property which defines what kind of action do we have in this case we add income transaction to the list therefore we need here type to be add income according to the convention the value of type property is written in uppercase actions also may have an optional property called the payload and in our case the payload property will hold the newly created income transaction I mean the object that we created in add transaction component all right that's it about the add income function we have to pass it down here and the provider then let's go to the uh producer file right now we have here just a default case and we had to adhere the new one it's going to be add income so if the action type is add income then we have to return the following first of all we need to spread out this state we are doing that in order to avoid changing the entire state for example in case of adding income we need to update only the income transactions so let's define in here so we have to pass here at first action not payload which holds a newly added income transaction and then we need to spread out the rest of the transactions so we need here state dot income transactions alright that's it about the reducer lastly we need to go to the add transaction component and get access to add income function from the global context therefore we have to import global context we need to import it from context folder and we have to select global state besides that we have to import use context hook as well and then we need to grab add income function from the context let's use the structuring we need here add income from global context and finally we need to call this function inside of the on submit income function as the arguments we have to pass your new income transaction all right so now it should work let's add here some test transaction as you see the new transaction is added to the list so everything works perfectly so far and now we need to take care of the expenses I want to do it a bit quicker because expenses need the exact same functionality let's go ahead and duplicate here the state and those two functions as well and change the names let's use a multi cursor and select income everywhere I mean income with the lowercase make it expense also select income with the capital I and make it expensive after that let's add to the input elements unchanged attribute and pass here function unchanged expense also we need the name attributes with the values expense text and expense amount and finally let's assign to the form element onsubmit attribute with a value on submit expense all right so I think we have changed everything let's go to the global State and duplicate add income function again we have to change the income into expense everywhere then pass this function down below after that we have to go to the UH producer let's duplicate a dinkum case and again change in come into expats all right so the last thing that we have to do is to go to the add transaction components and grab the add expense function from the global context all right so it should work now let's add an expense transaction all right so it works fine as well as you can see once we submit the form then input fields are not cleared let's go ahead and fix that and they own submit functions we have to set income and expense to the object with an empty text value as for the amount we have to set it to zero so use your set income and then set income text to an empty string as for the income amount we have to make it zero we need the same for expense as well so let's use set expense method and then make expense text empty swing as for the expense amount let's make it zero besides that we have to add to the input elements attribute called value for the first input it should be equal to income text then we need income amount the next one is going to be expense text and for the last element we need expense amount all right so if I add either income transaction or expense input fields will be cleared after submitting the form okay so we are done with adding income and expenses and now I have to take care of the delete functionality once we click the Delete icon then the transaction should removed from the list in the case of deleting the transactions we will have only one function so let's go to the global state rjs file and create a new function I'm going to call it delete transaction so in case of deleting transactions we will use ID of the object let's pass it here as the parameter then dispatch the action so the type of this action is going to be a delete transaction as for the payload it's going to be an ID of the transaction okay that's it about an action we have to pass the function down below inside of the provider then go to the up reducer file and create a new case which is going to be delete transaction so we have to return this state again I mean we have to spread it out then in order to delete a transaction I'm going to use one of the array helper methods called a filter at first we need to define income transactions so we need to look through the income transactions and return a filtered array I mean if the ID of the transaction does not equal to the ID of the payload then this transaction should be capped in the array so we need here state dot income transactions then we have to use filter method we need to pass your call function with the parameter which is going to be the current item in the array income transaction so if the ID of the income transaction equals the ID of the payload then this transaction should be removed from the array and the filtered array should be returned so we need here income transaction dot ID not equals to action dot payload the same we need for the expanse as well so let's go ahead and duplicate this code and change in come into expenses all right everything is ready we just need to attach a click event to the delete button so let's go to the income transaction the jas file actually I named this file as income transactions but it should be income transaction I'm not going to waste time on renaming it because we need to change the imports as well so let's leave it as it is you can rename it if you wish so here we have a delete button let's add to it unclick attributes then we need to grab the delete transaction function from the global context so let's go ahead and import at first global context from context folder and from the global state file also we need to import use context hook and then grab delete transaction from the global context let's use here destructuring we need delete transaction from the global context alright now we have to pass you an error function then we have to call delete transaction function and we have to pass here the ID as an argument because as you remember this function had ID as the parameter all right if I click the Delete icon then the income transactions will be removed ok let's go ahead and do the same for the expenses as well let's grab the imports from income transaction component and paste them in expense transaction component also we need to copy the delete transaction function and finally grab on click event with its value okay so if I try to delete expense transactions then they will be removed all right almost everything works fine now we have to take care of the balance right now it doesn't work let's go to the balanced ojs file and first of all we need to import global context from context folder and from the global state file also we need to import the use context hook next we need to grab income and expense transactions from the global context so let's go ahead and use destructuring and pass here income transactions and also expense transactions we need to grab them from global context ok so we're going to calculate the sum of income and expenses separately as for the total balance it should be calculated as the subtraction of total income and total expense so the first thing that I'm going to do is to collect and store income amounts in the variable so let's go ahead and create a new variable I'm going to call it income amount I'm going to map through the income transactions and grab all income amounts so we need to pass your callback function with the parameter income transaction which is going to be the current item from the array and we have to return income transaction dot income amount we need the same for the expense amount as well so let's go ahead and duplicate this code and change incoming to expense all right so once we have income and expense amounts now we can calculate the sums of them for that I'm going to use one of the array helper methods called reduce let's go ahead and create new variable I'm going to call it total income so we have to look through the income amounts and sum them up so we need your income amounts dot reduce let's pass your callback function which takes two arguments the first one is going to be the accumulator it holds the current sum of the items as for the second argument it's going to be the count array item I mean the current income amount alright so in order to sum up the amounts we have to return accumulator plus equals item reduce method accepts the second argument as well which is the initial value in our case is going to be the 0 because we don't need to add any additional value to the total sum all right finally I'm going to use another method called to fixed which adds the decimals to the number I'm going to past year - okay that's it about the total income we need to calculate total expenses as well so let's duplicate this code and again change income in GX past all right once the total income and expenses are calculated we have to pass them down here instead of the hard-coded values we need here total income and then total expense so as you see we have here total income and total expenses calculated correctly if I add here some transaction then the data will be updated and also if I delete the transactions then again the data will be updated accordingly all right let's take care of the total balance actually it is quite simple to calculate we need to subtract total expenses to total income so it's past year total income minus total expenses and again I'm going to use two fixed method with the value two all right so as you see the total balance is calculated if we delete or add the transaction then it will be updated as well okay actually we can say that we are done with the project everything works perfectly but I want to add here one more thing right now if I reload the page then we will get again three transactions on both sides that we define manually I want to save the transactions which we will add in the future to the list even if I reload the page or close the application and run it again I'm going to do that using browser local storage it allows us to save the data in the browser memory okay first of all I'm going to delete those default transactions let's make both arrays empty in general local storage stores the data in JSON format I mean it looks like the pure JavaScript objects it consists of key value pairs so if we add transactions we need to store them in JSON format and for that we need to use the JSON dot stringify method and also if we want to get the data from the local storage at first we need to parse it using J single parsed method alright so in this case I'm going to use another react hook called use effect it allows it to execute the function once the component is rendered or some piece of state is updated so let's go ahead and import use a fact hook then use it down below and pass here callback function so in order to send the data to local storage we have to use local storage dot set item method actually this method takes two arguments the first one is going to be the name of the collection I'm going to make it income transactions and it should be the string as for the second one is going to be the data which we need to send to the local storage as we said it's going to be formatted into JSON therefore we need to use here json dot stringify and we have to pass your income transactions I mean we need here state not income transactions let's go ahead and duplicate this code and then change in come in to expands okay let's go ahead and add some transaction so if we check the local storage actually we need to go to the application and click local storage then you will find that we have here the transaction it is represented in JSON format but if I reload the page then the data will be deleted that's because in the initial state income transaction is set to an empty array by default so we have to grab the data from local storage and use it as the value of income transactions property so we need here Jason dot parse then we have to pass your local storage dot get item this method allows us to get the data from local storage we have to pass here the name of the collection income transactions also we need here logical or operator followed by the empty array so it means that if we have some data in the local storage then we have to set and display it on the page and if not then the default value should be an empty array the same we need for the expansion's actions as well so let's grab this line of code and paste it here let's change incoming to expand okay let's go ahead and test how it works let's add here transaction then we load as you see now the data is saved and actually it works fine all right before I finish this tutorial I want to add one more thing to our project actually if the text field is empty and I submit the form then the transaction will be added anyway I don't want this I want to check if the input field is empty or not and then at the transaction so we need to use an if statement in add transaction component as the condition we have to check if income taxed not equals to an empty string and we have to pass this code inside the curly braces the same we need for the expenses as well so let's create if statements where the condition expands text not equals to an empty string and pass here the cold so now as you can see I'm not able to add an empty transaction so it works fine all right so finally we are done with our projects I hope that it was interesting and helpful we used react hooks with context API which nowadays is a really popular combination to use so I hope you enjoy the project and learn some interesting stuff if you like this video then please thumbs up comment below share the video subscribe to our channel and click the bell to get notified on coming tutorials ok see you in the next video

Channel: Code And Create

Views: 17,442

Rating: 4.9802957 out of 5

Keywords: React, ReactJS, React Hooks, Web Development, Programming, JavaScript, Budget App, Context API, Local Storage

Id: fDffQYs2WB0

Length: 65min 46sec (3946 seconds)

Published: Sat Apr 04 2020