React App with Context API and React Hooks / Build a Task Manager using React / Context API / Hooks

hello and welcome to our new YouTube tutorial it's been a few months since we released our last video but now we are back and we are going to continue creating the content more frequently and consistently so in this video we're going to create a react application with context API and react hooks those features are getting more and more popular today and that's why we decided to use them so the application is going to be a task manager for support before we start to create it let's go ahead and describe what this application is all about as you can see here in the center of the page we have our nice-looking app it can see itself an input field in which we can enter some tasks like read the book once we click the add task button or just press the Enter key the task will be added and displayed down below let's add one more task let's say wash the car ok so as you can see here on the right-hand side of each task they have two different buttons to delete the task and to edit it so if I click the delete button then the task will be removed from the list and if I click the edit button then the contents of the task will be displayed inside of the input field also the button will be changed from add to edit so if I change the text here let's add wash the car today and then click the edit button the task will be updated and also the text of the button will be changed back to at alright let's go ahead and add a couple of dummy tasks so if I reload the page then you will find that all the tasks are saved despite the refreshing the page and it happens because we saved them in a browser local storage the last thing that I want to show you is that we have here another button called clear which actually allows us to clear the entire list all right that's it what we're going to create throughout this video again we will use react with context API and hooks so I expect that you already know at least the basics of JavaScript and react and also context API and react hooks so let's go ahead and start building this application from scratch here on the desktop I have created a new folder called react app let's go ahead and open it using vs code actually we're going to use vs code throughout this tutorial as a text editor but of course you can feel free and use your favorite one as you can see right now this folder is empty so the first thing that I'm going to do is to open up the terminal which is all of the built in in vs code in order to open up the terminal you need to go to view and click the terminal or you can just use a shortcut which is control + backtick it's placed right above the top key alright let's go ahead and generate a brand new react application for that we have to run the command + px' create react app followed by the name of the application which is going to be task manager actually this process takes a couple of minutes so I'll be back once it is done okay so the react app is generated we have here some default files and folders and now I'm going to open this application into the browser for that we have to run NPM start by the way in order to run this command you must have installed nodejs otherwise you won't be able to run the application I mean you won't be able to use NPM which stands for the node package manager I hope you already know this stuff and you already have installed nodejs alright so the application is up and running let's go ahead and organize our working environment I mean let's place the editor and browser side by side to make the working process more convenient as we already said react generates some default files inside of a source folder I'm going to delete all of them and start from scratch as you can see the app has crashed because we don't have here any working file in the SRC folder let's go ahead and create in next a JS file in which and I'm going to bring in a react and react Tom for that I just need to type I M R and I M Rd actually I'm using a package called es 7 react Redux snippets which is a great package because it allows us to write the code using some shortcuts and actually it saves our time so you can go ahead and install it ok next I'm going to import app components which right now doesn't exist but I will create it in a second it's going to be placed in components folder and finally let's render the app component for that we need react tom dot render then we have to pass here the app component and we need to select the root development which actually is placed in index dot HTML file so let's go ahead and select these elements using get element by ID method let's insert here ID root alright so as I said I have to create the app component so first of all let's create a new folder and call it components and then inside this folder I'm going to create a component called Auto jeaious ok now it's time to insert some boiler played inside of the app DOJ's file and actually make our application work for that I'm going to use the shortcut RA FCE this gives us an import statement to bring in react also it generates a functional component with an expert default statement let's go ahead and inside the development insert app so once we save this code then the text app will be rendered on the page so it means that the application is working fine alright that's good actually I wanted to tell you that throughout this tutorial we're going to take care of the functionality of this application because I don't want to waste time on styling so I will use ready stylesheet I'm going to create an app dot CSS file in which I will insert all the styles that we need for this application actually you can grab the CSS code from the project source files which are uploaded on github and you can find the link in the description so let's go ahead and bring the CSS for this application alright so we are ready to start building our app the first thing that I'm going to do is to create this state then insert a couple of tasks in the state manually and then render them on the page actually there are a couple of ways to create and manage the state you can use either class-based components or maybe redux or context API and hooks as we already said who will manage our state and share it through the components using contexts and hooks so let's go ahead and create a new folder I'm going to call it context and then inside this folder create a file called task list contacts Jes so first of all let's go ahead and import react for that we need to type IMR then also we will need a function called create context which actually allows us to create eight context and also we need to get one of the rillette hugs use state which is used to create the state all right now let's go ahead and create context for that we need export and we have to create variable cost task list context actually you can call it whatever you want it should be equal to create context function so this is going to create the context for us and we'll save it in this variable here at this point it won't do much for us because we haven't created or provided any data yet so after that we need to create a component which will include the state let's call it task list contacts provider again you can call it what you want but as a convention we use the name of the context followed by the provider let's return here which is plaintiff and I'm going to pass here task list context and finally I'm going to say export default task list context provided alright so we created context and now it's time to take care of the state we're going to do that using use state which we already have imported so let's use this function actually this hood accepts an arguments which should be the initial State so I'm going to insert in it an array and then inside that array I'm going to pass a couple of objects each of them will have a task and ID properties so let's go ahead and do that the first task is going to be let's say read the book with the ID one then I'm going to duplicate this object twice as the second task that's go ahead and insert wash the car ID it should be two as for the third one let's insert write some code with the it3 so we have here an array as an initial value of this piece of state this function returns to us an array with two values the first one is going to be the actual data I mean the array of those objects as for the second one it should be the function which we're going to use to edit or update the data in order to bring those values we have to use an array structuring let's pass in the first value and call it tasks as for the second one as I said it's going to be the function so I'm going to call it set tasks so each time when we need to update the data I'm in this piece of state we should do that using the set task function alright so the state is created and now I'm going to render those tasks on the page as a list in order to do that I'm going to create another component inside the components folder I'm going to call it task list dot G is inside that file I'm going to create a functional component for that we can type the following shortcut ra f c/e so it has generated the functional component let's go ahead and insert here task list for a while okay now we need to import one of the hooks called use context actually use context hook allows us to bring in the context that we have already created I mean it returns the current context value besides that we need to import the context itself so let's import tasklist context from the context folder we need to grab task list context alright so in the context file we created the state which includes an array of tasks and in order to render them on the page first of all we have to get access to that array so I'm going to use use context hook which accepts one argument and it's the context itself now we can use destructuring and get the tasks from the state all right so right now we have access to tasks array and in order to render list on the page we have to loop through this array using one of the array helpful methods called map so inside the development I'm going to return you well with the class name released which actually will be used for styling by the way we didn't connect the CSS file to our application yet so let's go ahead and do that we have to go to the upload J's file and import CSS file we have to go up one directory and we have to indicate the name of the file right now nothing happens just the margin and padding are removed from this textview alright let's go back to the task list component as we said we have to map through the array for that let's open here curly braces because we need to write some JavaScript so I'm going to say tasks dot map then we need to pass in an arrow function with the current item it's going to be the task and then we have to return the list item with the contents of the task in this case I'm not going to use just the Li element because would be better if we create a separate component for each item so inside the components folder let's create a new component I'm going to call it task ojs then let's go ahead and generate some boilerplate for a functional component so here instead of the development I'm going to return element with the class name least item actually it will include a couple of elements the first one is going to be the span this element will include the content or in other words the title of the test right now let's just insert task title next I'm going to insert here developments which will include two different buttons I mean buttons to delete the task and to add it so let's open button element and assigned to it class names BTN delete and task BTN then I'm going to insert here icon which is going to be the font awesome icon so first of all let's go ahead and grab the CDN link for font awesome I'm going to search for font awesome CDN jes go to the very first link here and then copy the first link we have to insert it in the index dot HTML file which is placed inside the public folder let's open here the link tab and paste CDN as the value of H refers attribute okay let's go back to the task component and insert here I owned with a class names FAS fi - trash - out this pattern is going to be for deleting the tasks we need similar one for editing so let's go ahead and duplicate this button I'm going to change the class name instead of PT and delete we need BTN added and also changed the class name of high element we need FA - pan alright that's it for now regarding the TAS components right now still there is nothing on the page but we will fix that soon let's go back to the task list component in which we were mapping through the array at first I'm going to import the test component it's placed in the same folder and then returned down below these components all right now let's go to up to J's file import task list component and then down below insert this component inside the development so once we save this file then we will get an error the reason is that we haven't created a contact provider yet and therefore we are not able to share this state through the components so we have to go to our contacts file and down below instead of the developments we have to return task list context dot provider it should have one property called value which actually will include the actual data from this state in this case tasks so we need to open double curly braces and we have to pass in tasks and finally we need to wrap with this provider the entire application that will allow us to share the state through the different components so at first we need to pass here props dot children this refers to all the components which will be wrapped by the country's provider and also we have to pass the props as an argument in our functional component the last thing that have to do is to go to up to J's file then import the task list contacts provider and lastly let's wrap the entire app with this provided alright once we save this file then finally we would get the list on the page right now we have just a hard-coded task title as the content of the items but we'll fix that soon before then I'm going to add here a couple of developments in order to make our app looking better we have one development let's go ahead and assign to it class name container then inside it open another div with the class name app wrapper then again we need to create another development which should have class name main and finally let's move up the tasks list component so once we save then our application will get a much better look as you can see all the tasks have the same title and actually we don't need it we have to get the proper title from the state and for that we have to go to the task list component and assign a property to task component which is going to be tasks then we have to assign to it the current task item after that let's go to the task component we need to get access to the task item so I'm going to use restructuring and then inside this panel instead of the hard code task title when to pass tasks dot tasks which actually is a property of the object in the state so as you can see now we have here the actual tasks from the state and not the hard-coded content actually I think it's not quite nice to use the task as the name of the item and the name of the property as well so I'm going to change it into a title and also change the task into the title in task component as well all right before we move on I like to mention that we have here a tiny problem if we open up the console we will find the warning saying that we need the key property for each list item in this case I'm going to use the ID as the key so let's go ahead and add here key property with value task dot ID all right that's it about the task list component next I'm going to take care of the input field I'm in the input field which we need to use to add the tasks so I'm going to create a new component I'm going to call it task for Jas then create a functional component using any shortcut our a FCE so the form component will include an input field and two buttons to add the tasks and to clear them so let's create a form element with the class name form then insert in it input element with the type text then assign to the class name task input and use placeholder attribute with value add task also I'm going to use an attribute called required actually this attribute won't let us submit the form until it's empty so that's why we are using it next let's open development with the class name buttons and insert minute button element with the type submit' also assigned to it class names BTN and add task BTN and as the value let's assign to it add task but then I'm going to duplicate these elements let's get rid of the type attribute and also change the class name we need here clear BTN and finally change the value make it clear okay so the task form component is created and in order to render it on the page we have to go to up the J's file first of all we need to import this component it's placed in the same folder so we need here the name of the file task form and then let's go ahead and place it right above the task list component alright so as you can see the input field with its buttons is displayed on the page before we move on instead to work on the functionality I'm going to create and render the header component I'm in the heading task manager so let's create a new component and call it header Doge is this component will be a kind of simple one we just need to render a single heading so let's generate functional components then assign to development class name header and insert meaning h1 heading element with the content task manager ok now let's go to AB DOJ's file import header component and pass it right above the development which has a class name main ok so as you can see the header component is displayed on the page as well alright so we have created all the elements and components and now it's time to take care of the functionality of the application so we need to create different functions to add delete clear and add its tasks let's go ahead and start with adding the tasks I'm going to create those functions in the context file so after the state let's create function and call it add task this function is going to take one parameter and it will be title so in order to create a new task we need to define its title and ID and also we have to add a newly created task to the current state it means that we have to update the state when we add a new task as we already said when we are going to update the state in this case tasks array we have to use set tasks function so to add a new task to the current array we need to create a brand new array I made to replace the current one and we have to spread out the content from the current array for that we can use this print operator which is expressed by three dots and we have to pass here tasks then we have to add a new object with title property which should have the value title but according to es6 syntax if the property and the value are the same we can leave here just title besides that we need ID because each object in the state includes a unique ID there are a couple of ways to generate a I D and the easiest one is to use a package called UUID so I'm going to install this package we have to run npm install UUID once the installation process is done we need to bring this package in so we have to import UUID from UUID and then we have to call this function as the value of ID property alright that's it about add task function now I have to pass it in a provider in order to use it from other components so now let's go to the task from component and then bring in context we have to import task list context from the context folder and we have to grab task list context also we need to use use context hook so let's go ahead and bring it now in order to get access to add task function we need to call use context book with the argument task list context after that we can use this structuring to grab the add task function from the store alright so we have access to add task function and we need to execute this function when we submit the form so we need two different things here we have to set up the own submit event and we have to grab the value from the input field so we need to assign to form a loan on submit event it will take the function and I'm going to call it handle submit we'll create this function in a second and also we need on change event for the input element it will take another function so let's call it handle change using this function we will grab the value from the input field let's at first create the handle change function as the parameter we need to pass here and event object then let's duplicate this function and change the name make it handle submit in case of handle submit function we have to prevent the default action of the submit button I mean if we click the submit button then it will reload the page actually we don't need it so in order to avoid this kind of thing we had to use ethought prevent default method so as we said it prevents the default action of submitting default all right now we have to create the state in which we would store the current value of the task I mean the title of the task first of all let's import use state hook and then down below insert we need the structuring with two values title and then the function set title and I'm going to set title as empty string using use state hook okay now in order to grab the value from the input fields and store it in the title we have to use set title function with the argument e dot target dot value so if we run title to the console and then start typing in the input field we will get the values in the console so it means that the value is stored in the title okay the only thing that have to do to add the task to the list you to call the add task function we have to call it inside handle submit function and we have to pass an argument title and also we need to define the value for the input element as a title as well let's get rid of constant load lock from here then go ahead and type something in the input field so once we click add test button then the task will be added to the field all right so now we already can add tasks to the list actually we have here a little issue once we add the task we have to clear the input field for that we just need to set the title as the empty string all right now if we test again then you'll find that everything works fine and we can move on and start to work on deleting the tasks for that let's go back to context file and create a new function I'm going to call it remove tasks this function should take one parameter and it's going to be an ID all right again we need to use set tasks function because we need to update the current state so to remove a task from the list we have to use one of the array helper methods which is a filter this method returns filtered array based on some condition so let's go ahead and use it I'm going to say tasks dot filter then pass here an arrow function with the current item task so we have to filter an array for that we have to the following condition tasks dot ID not equal to ID so according to this condition the filter method will keep the item in an array or it will filter the item out if this condition is true then the ID of the current task does not equal the actual ID and the task will be kept in an array if it is false then the task will be filtered out and eventually we will get back a new array with deleted tasks all right that's it about this function we have to pass it down in context provider then we have to go to the task component and call this function when we click the delete button so first of all we have to bring in a use context hook also we need to import context so we need import task list context from context folder after that let's go ahead and grab remove task function from the context so we need to use your use context with the argument task list context and finally we need to call remove task when we click the button so we need on click event as you know this function accepts 1 arguments which is ID so I have to pass here an arrow function and then call remove task with the argument task dot ID ok if we click the delete button then the task will be removed from the list all right so with the remove task function we are done we are able to delete tasks from the list next up I'm going to work on clearing the entire list so we have to go back to the context file and create a new function I'm going to call it clear list actually this function is going to be a kind of simple one the only thing that have to do is to set tasks as an empty array then as usual we have to pass down this function and the provider then let's go to the task for component grab clear list function from the context then use on click event for the Clear button and finally pass here clear least function so if we click the Clear button then the entire list will be deleted all right that's it about clear functionality before we move on to the next step I'm going to do one more thing once the list is empty I want to display some text like no tasks let's go to the task list component so we have to use the conditional rendering using the ternary operator so if there exists a length of tasks it means that we have at least one task in the list and we have to render a waste otherwise we have to display the text no tasks so let's open curly braces right under the deep element as a condition let's pass here tasks dot length so if this is true if there exists the task then we have to render new element but if it is false if a list is empty then I'm going to display development which should have cross name no tasks and we have to pass here no tasks all right so if I clear the list then we will see that there are no tasks ok so that's it about the clear functionality the next thing that have to do is to make the edit button work this part is going to be a little bit challenging unlike the previous parts so once we click the edit button we have to grab the current items title put it in the input field also we are going to change the value of the button from add to edit and once we change the content of a task and click the edit button then it should be updated alright let's go ahead and do that first of all I'm going to create a new state in which we will store the editable tasks let's this structure to values edit item and also we need to set edit item and I'm going to set edit item as no next we need to create a function which should find an item that we need to update so let's go ahead and create function within a fine item this function should accept on parameter and it's going to be an ID so in order to find the item we have to use one of the array helper methods which is called find in general dysfunction loops through the array and finds an item according to some condition in this case we have to compare the current items ID and the actual ID so let's create a variable call it item it should be equal to tasks dot find I'm going to pass here an arrow function with the current item task so as we said we have to compare the current items ID and the actual ID so we need here task type ID triple equals to ID okay once we find a needed item then we have to update this state and make this item T as table one so we need set edit item and we have to pass your item alright let's go ahead and call this function first of all we need to pass it down below in context provider then go to task JS file we have to call this function once we click the edit button so let's go ahead and grab file item function from the context then assign to edit button on click event we have to pass your arrow function and we have to call function find item with the argument task dot ID okay after that we have to create a function for editing so let's go ahead and go back to context file create new variable I'm going to call the function edit task so this function should take two parameters those will be two properties of the task object I mean the title and ID actually during the update of the task we don't need to change the ID of the item therefore we have to use a map method so I'm going to create a new variable and I'm going to call it new tasks so we're going to replace the current array with a new one in which will pass the edited item so we need to use again the map method then let's insert here arrow function with the current item task and now we have to use a conditional statement I'm going to check if task ID equals to actual ID if this condition is true then we have to return a new object with the actual title and ID otherwise if this condition is false we have to return the current task ID right next we have to update the state for that we have to use set tasks function and we have to set the value of tasks as new tasks okay that's it about the Edit function let's pass it down and the provider also we need to pass here edit item as well because we need to get access to it from the task phone component so let's go ahead and go to the task form component so what we have to do here is that we have to look at how edit items value is changing I'm going to use another react heuk called use effect actually it is similar to the components lifecycle methods such as component did mount it rear Enders component once the piece of state is updated so let's go ahead and import this hook then down below we have to call this function and we have to pass an error function in it okay so now we have to check if Edit item equals to null or not first of all let's grab it from the context also I'm going to bring in edit task function then down below use if statement in which we have to check if edit item does not equal to null if this is true it means that we are in the process of editing the item therefore we have to change the value of a title and set it as the title of edit item so we need set title with the argument edit item dot title if this condition is false then we have to set title to an empty string so we need our statement that said title with the argument empty swing and finally we need to run this hook only when the value of added item updates and to do that we need to pass here the second argument in square brackets and we have to indicate here edit ID again use effect hook will run only if edit item is updated all right let's go ahead and test how it works let's run to the console edit item if I click the edit button then the title will appear in the input field and also we will get the editable item in the console if I change the title and click the button then it will be added as a new task because the Edit task function is not executed yet so we need to run it once the form is submitted therefore we have to do it in handle submit function before that we have to use if statement because we need to check if Edit item equals to null or not so if it is true then we have to run those two functions and if it is false then it means that we are editing the task therefore we have to call edit test function in else statement as you know this function takes two parameters title and ID so let's insert here title as the first argument and them as an ID we have to pass edit item dot ID all right now it should work let's click the edit button change the title then if I click the button the task will be updated ok so it works fine but still we have to do a couple of things as you see the title of the task stays in the input field it's not cleared and all so as we said we have to change the value of the button from add to edit in order to clear the input field we have to set edit item back to now let's go back to the context file and in edit task function right set edit item with value now okay let's check again if I edit the task then the input fields will be cleared next up let's take care of the button instead of this value we have to use a conditional statement so let's go ahead and open curly braces we have to check if ad litem equals to null or not so as the condition I'm going to pass here edit item not equals to null actually we can pass here just edit item because if it is now it means that it returns false and if it is not equal to null then it returns true so if this is true then we have to make the value of the button edit tasks otherwise we need add tasks actually we can change the conditions above as well we need here just edit item and here we need not edit light okay let's test again if I click the edit button then the value of the button will be changed and once I edit the item the value of the button will be changed back to add task all right actually we are almost done the application is working fine the only thing that have to do is to save the data in the browser local storage because when we reload the page then the current data is lost let's go to the context file first of all let's clear the array in the state so in order to add a data to local storage we have to use its built-in function called set and we had to do that using the use effect hook so let's import it then run it down below so now we need local storage with this set item function this function takes two arguments the first one is the name of the collection we have to use string value as for the second one it should be the actual array but instead of just passing an array we have to transform it into JSON formed for that we have to use method called stringify so we need json dot stringify and we have to party your tasks array also we need to pass here the second arguments tasks because we need to run user fact hook once this array is updated okay let's go ahead and test how it works I'm going to open local storage for that we have to go to the application and then find local storage for now as you see we have an empty array but once I add some tasks then they will be ended up here in the local storage but if i refresh the page then they will be gone so in order to fix that we have to define the initial value of the estate where we should store an array from the local storage so let's go ahead and create a new variable I'm going to call it initial state so in order to get data from the local storage we have to use a function called get item so we need local storage dot get item as the parameter we have to pass here the name of the collection tasks if there won't be any data in local storage then we should set initial state as an empty array so I'm going to use or operator followed by the mtra besides that we need to parse data because as we said it is stored in JSON format for that we have to use JSON dot parse method and finally let's insert here the initial state instead of that empty array alright let's go ahead and test once again how it works let's add a couple of tasks then if I reload the page data will be saved and we will get here the list of tasks alright finally we are done the application is working perfectly and I hope you enjoyed this project so if you liked this video then please thumbs up comment below and subscribe to our channel because lots of interesting projects are coming up ok see you

Channel: Code And Create

Views: 44,427

Rating: 4.9570956 out of 5

Keywords: React, ReactJS, JavaScript, Context API, React Hooks, Web Development, Programming, Front-end

Id: fqup-BL3VjI

Length: 54min 13sec (3253 seconds)

Published: Wed Dec 04 2019